手机网站自适应的方法2
2016-07-13 18:51
260 查看
手机网站自适应的方法2
一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的? 其实并不难。 首先,在网页代码的头部,加入一行viewport元标签。 <meta name="viewport" content="width=device-width, initial-scale=1" /> viewport的说明 viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。 所有主流浏览器都支持这个设置。 二. 不使用绝对宽度 由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。 由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要。 具体说,CSS代码不能指定像素宽度: width:xxx px; 只能指定百分比宽度:width: xx%; 或者 width:auto; 三. 相对大小的字体 字体也不能使用绝对大小(px),而只能使用相对大小(em)。 body { font: normal 100% Helvetica, Arial, sans-serif;} 上面的代码指定,字体大小是页面默认大小的100%,即16像素。 h1 { font-size: 1.5em;} small { font-size: 0.875em; } 四. 流动布局(fluid grid) "流动布局"的含义是,各个区块的位置都是浮动的,不是固定不变的。 .main { float: right; width: 70%; } .leftBar { float: left; width: 25%; } float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。另外,绝对定位(position: absolute)的使用,也要非常小心。 五. "自适应网页设计"的核心,就是CSS3引入的Media Query模块。 它的意思就是,自动探测屏幕宽度,然后加载相应的CSS文件。 <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen。css" /> 上面的代码意思是,如果屏幕宽度小于400像素(max-device-width: 400px),就加载tinyScreen。css文件。 <link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="smallScreen.css" /> 如果屏幕宽度在400像素到600像素之间,则加载smallScreen。css文件。 六. 图片的自适应(fluid image) 除了布局和文本,"自适应网页设计"还必须实现图片的自动缩放。 img { max-width: 100%;} 这行代码对于大多数嵌入网页的视频也有效,所以可以写成: img, object { max-width: 100%;}
相关文章推荐
- Android之获取手机上的图片和视频缩略图thumbnails
- android wifi 无线调试
- 基于 Linux 的智能手机 Librem 5 开启预售
- 5 个可以满足你的生产力、沟通和娱乐需求的开源手机应用
- 每日安全资讯:哪些属于App违法违规收集使用个人信息?
- 每日安全资讯:命案侦破过程揭示 Google 能够跟踪全世界的手机
- 表格标签table深入了解
- WEB标准网页布局中尽量不要使用的HTML标签
- 如何使用jquery easyui创建标签组件
- 手机4大隐藏功能及使用必知常识第1/2页
- 谈谈网页设计中的字体应用Font Set
- web标准知识――用途相似的标签
- 网页设计中的 serif 和 sans-serif字体应用
- Android改变手机屏幕朝向的方法
- h1标签的使用技巧
- php实现用手机关闭计算机(电脑)的方法
- 探讨JavaScript标签位置的存放与功能有无关系
- 基于JavaScript代码实现pc与手机之间的跳转
- js判断手机和pc端选择不同执行事件的方法