移动端页面制作

之前经常听到移动端这个词，但自己并没有真正的编写过移动端代码，今天决定仿豆瓣的移动端页面。移动端的代码编写其实不复杂，值得注意的地方有：特殊的meta标签、百分百比布局、rem设置字体大小。

老司机请绕行~

【特殊的meta标签】

1 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；

name 属性的 viewport 值（移动屏幕的缩放）

viewport 就是除去所有工具栏、状态栏、滚动条等等之后用于看网页的区域，这是真正有效的区域。
 
可以操作的属性有 4 个：

width ---------------------– // viewport 的宽度 （范围从 200 到 10,000，默认为 980 像素）
height --------------------– // viewport 的高度 （范围从 223 到 10,000 ）
initial-scale --------------– // 初始的缩放比例 （范围从 > 0 到 10）
minimum-scale ---------– // 允许用户缩放到的最小比例
maximum-scale --------– // 允许用户缩放到的最大比例
user-scalable -----------– // 用户是否可以手动缩放 (no，yes)

1 body {
2     min-width: 320px;
3 }

 有些安卓系统自带的浏览器并不支持这一条规则，能够对页面进行放大，一旦放大响应的 box 也随之放大，导致页面出现错乱问题，解决方法：定义页面的最小宽度； 

1 <meta name="format-detection" content="telephone=no" />

 使设备浏览网页时对数字不启用电话功能（不同设备解释不同，iTouch 点击数字为存入联系人，iPhone 为拨打电话），忽略将页面中的数字识别为电话号码。

 【百分比布局】

 在写移动web页面时，我们要用百分比布局来实现自适应屏幕宽度。
 如果元素100%显示，又必须有一个固定的padding-left／padding-right，还有1px的边框，为避免出现横向滚动条，可以加上box-sizing属性
  
1 element{
2         width: 100%;
3         padding-left: 10px;
4         box-sizing:border-box;
5         -webkit-box-sizing:border-box;
6         border: 1px solid blue;
7 }

 【rem设置字体大小】

 css中的单位：px／em／rem（以下代码参考于0101后花园）
 
px：就是css中最基本的长度单位了，用px做单位基本上没什么问题，可以做到让页面按套路精确的展现。但如果全篇用px布局会暗藏一个问题，就是当用户和Ctrl滚页面的时候（说白了就是ctrl+，ctrl-），你会发现页面结构产生了不可预知的错乱，因此有砖家倡导使用em替代px。
em：em是相对单位，em相对的基准点就是浏览器的字体大小（浏览器默认字体为16px），所以1em默认等于16px。那么14px＝0.875em; 公式是14/16=0.875em。用em来写的话，就可以解决ctrl+，ctrl-时造成的页面错乱问题，

常用em对照表如下:

有一种简单的方式，在根节点<html>上重定义基准字号 html {font-size:62.5%} ，此时页面基准字号就是 16px * 62.5% = 10px , 那么此时 1em = 10px，那么此时14px = 1.4em，15px=1.5em这样就简单多了。

可是，问题又来了，em准确的说是相对于父节点的字号来计算的，如果自身定义了字号那么就相对自身字号来计算，举例如下：
1 html { font-size: 100%; }
2 .box-0 {
3     height: 1em; /* 此时height等于16px */
4 }
5 .box-1 {
6     font-size: 0.625em; /* 此时基准字号以变更为16*0.625=10px */
7     height: 1em; /* 此时实际height等于10px */
8 }

在整个页面内1em并不是一个固定不变的值，1em不停的变换。有了rem就好解决了。

rem：rem只相对跟节点<html>计算，只有把根节点设定好参考值，那么全篇的1rem都相等，计算方式同em，默认1rem=16px; 同理你可以设定html { font-size:62.5% } 那么1rem就等于10px，以此类推。

声明一下：rem是css3属性，没错！这就是说屌丝ie678不支持rem属性，只有chrome、firefox等高富帅支持！那么我们就在ie678中用px做兼容处理，例如： 

1 .box {
2     font-size: 14px; /* 用来兼容ie678 */
3     font-size: 0.875em; 
4 }

写的不好的地方欢迎指正，谢谢啦！

 
 
 
 
 
posted @ 2016-07-25 16:36  乔小玛  阅读(1108)  评论(0)  编辑  收藏  举报