响应式布局特点、 Meta标签的设置、移动端页面布局

最新推荐文章于 2023-09-08 08:48:32 发布

zcy_369

最新推荐文章于 2023-09-08 08:48:32 发布

阅读量552

点赞数 1

本文链接：https://blog.csdn.net/zcy_369/article/details/119392805

版权

本文介绍了响应式布局的优缺点，强调了其在处理多设备显示适应性方面的优势和效率挑战。详细讲解了Meta标签的设置，包括如何设置viewport属性以适应不同设备，并防止电话号码和邮箱地址被误识别。最后探讨了移动端页面布局，如等比缩放布局(rem布局)和100%布局，以及如何利用媒体查询和JS动态设置font-size以实现等比例缩放。

摘要由CSDN通过智能技术生成

响应式布局特点

优点
面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题

缺点
   兼容各种设备工作量大，效率低下
   代码累赘，会出现隐藏无用的元素，加载时间加长
   其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
   一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

Meta标签的设置
   准备工作：设置Meta标签
       <meta name="viewport" content="width=device-width”, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0, user-scalable=no">
       这段代码的几个参数解释：
width = device-width：布局视口的宽度等于当前设备视口的宽度
initial-scale：初始的缩放比例（默认设置为1.0）
minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）
       H5页面窗口自动调整到设备宽度，并禁止用户缩放页面
           <meta name="viewport&