本文介绍了移动端Web页面适配的关键技术，包括设置viewport以适应不同设备宽度，理解CSS3盒模型以控制元素尺寸，以及使用flex布局实现灵活的页面布局。通过调整viewport属性、选择合适的box-sizing和应用flex布局，可以创建响应式的移动端页面。同时，文章还分享了作者的前端开发经验及学习资源。
2.1、viewport - 可视区
最初手机端需要照顾 PC 端，如果不设置 viewport，直接访问网页的时候，我们发现网页内容看着很小，这是因为页面按照PC端最小宽度980展示的，也就是我们的网页宽度就是980，而手机屏幕宽度通常375、411、320、414等，没有980那么大，所以页面被缩小了很多。
设置viewport
<meta name=“viewport”
content="width=device-width,
initial-scale=1.0,
user-scalable=no,
minimum-scale=1.0
maximum-scale=1.0"
/>
分别对 meta 的各个属性介绍如下：
-
width - 设置viewport的宽度，为一个正整数，或字符串‘device-width’
-
initial-scale - 设置页面的初始缩放值，是一个数字，可以是小数
-
maximum-sacle - 设置页面最大缩放值，是一个数字，可以是小数
-
user-scalable - 是否允许用户进行缩放，值为’yes’或者’no’,yes表示可缩放，no表示禁止缩放
-
minimum-scale - 允许用户缩放的最小值，是一个数字，可以是小数
-
height - 设置layout viewport的高度，这个属性很少使用
一般情况下禁止用户缩放网页
最低0.47元/天 解锁文章
214
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
