移动端页面制做

时间 2019-11-08

标签移动页面制做栏目无线繁體版

原文原文链接

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

老司机请绕行~html

【特殊的meta标签】

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

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

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

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)chrome

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就好解决了。spa

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 }

写的很差的地方欢迎指正，谢谢啦！