移动端页面布局（响应式布局）以及meta标签的设置

最新推荐文章于 2023-01-12 11:41:32 发布

从0到1，从1到0

最新推荐文章于 2023-01-12 11:41:32 发布

阅读量1.7k

点赞数

本文链接：https://blog.csdn.net/weixin_43668201/article/details/98608442

版权

本文介绍了移动端页面响应式布局的概念、优缺点及实现方法，如CSS3 Media Query和Bootstrap框架。讨论了不同设备间布局的区别，并详细阐述了Meta标签的设置，包括宽度适应、缩放限制等。此外，还解析了ppi、dpr、dpi等屏幕参数，以及Vw和rem在适配中的应用。

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

响应式网站设计

什么是响应式布局？
1、服务器根据不同的浏览器用户端，为用户呈现不同的页面效果。
2、可以让一个网站兼容不同分辨率的设备，给用户更好的视觉使用体验。
3、移动互联网催生了响应式布局的诞生。
响应式设计优缺点
优点:
解决了设备之间的差异化展示,让不同的设备达到最优的视觉体验.
缺点:
兼容性代码多,工作量大,加载速度受影响
对原有网站布局会产生影响,用户判断未必精确.

响应式设计的原则
1.移动优先：在设计的初期就考虑页面如何在多终端展示
2.渐进增强：充分发挥硬件设备的最大功能

如何实现响应式布局？
1.css3-Media Query：代码简单（媒体查询）
2.借助原生Javascript：主要用于老浏览器上，加载速度慢，不推荐
3.第三方的开源框架，如bootstrap，可以很好的实现浏览器对响应式的支持

基本语法
外联CSS语法

<link rel=“stylesheet” href=“wide.css”   media="screen and (min-width:320px)" />
<link rel=“stylesheet” href=“mobile.css”  media="screen and (max-width:1000px)" />

内嵌样式的语法