移动端布局

来源：互联网发布：大数据监控系统编辑：程序博客网时间：2024/06/04 23:18

css像素与设备像素：二者的区别在于前者是抽象的，用于浏览器渲染页面，而后者是设备的最小物理单位。可参考A pixel is not a pixel is not a pixel进行理解。

视口：移动端浏览器有两个视口，即可见视口与布局视口，二者的区别在于前者为基于移动设备屏幕的实际宽度，而后者为我们为页面定义的用于浏览器渲染的大小。可参考A tale of two viewports进行理解。

媒体查询：找准断点。

响应式布局：当上下文环境发生变化时可考虑变化布局来展现优雅。当元素脱离文档流绝对定位时，才是相对高度定义的。

响应式字体：font-face绝对会对你的站产生巨大的影响。当容器中定义字体单位为em时要注意继承性，例如：当我们定义某个块级元素的“font-size：1.5em; line-height: 2em;”时，line-height的实际行高为1.5em*2即3em。

文档声明：文档声明建议用html5的：<!DOCTYPE html>，它指示浏览器关于页面使用哪个 HTML 版本进行编写的指令。同时需要定义文档的视口信息，如：<meta name=“viewport” content=“width=device-width, initial-scale=1, user-scalable=no”>width=device-width告诉浏览器渲染该页面的宽度等于设备宽度，initial-scale=1告诉浏览器初始化缩放的比例1:1，user-scalable=no禁止用户缩放页面。

兼容性测试:

调试工具推荐chrome的模拟器加真机测试，更多关于debug的工具可以参考Debugging Mobile Web Page这篇文章。

总结：

移动端开启了一个时代，它不是虚无缥缈或者高不可攀的，它反而让曾经被忽视的渲染方式及web标准等实质性的问题更加清晰，相较上述两种思路，我们更倾向于各司其职思路清晰的第二种方案，我们可根据不同终端做不同的交互设计、视觉设计，研究不同的前端技术、用户体验，适合的才是更好的。做为前端工程师，让我们理解原理，探索实践，跨终端任重而道远。

阅读全文

0 0