响应式布局介绍
时间：2023-09-02 20:18:02 | 来源：网站运营
时间：2023-09-02 20:18:02 来源：网站运营
响应式布局介绍：建议学习时长： 30分钟
学习方式：了解
学习目标
组队做项目，欢迎加入很棒棒少年团
- 了解什么是响应式样
- 知道页面的 viewport 该怎么设置
- 了解 CSS像素和设备像素的区别
详细介绍
响应式布局是当今流行的一个设计理念，随着移动互联网的盛行，为解决各式各样的浏览器分辨率以及不同移动设备的显示效果。简单来说，让同一个页面在不同大小的设备上看着都ok。
基础概念
viewport
移动设备上的 viewport 就是设备的屏幕上能用来显示我们的网页的那一块区域，再具体一点，就是浏览器上用来显示网页的那部分区域。viewport 是可以设置的。一般这么设置，让viewport的宽度等于设备的宽度：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
想了解更多，可以阅读下面的两篇文章：
- 两个viewport的故事（第一部分）
- 两个viewport的故事（第二部分）
设备像素比率（Device Pixel Ratio，DPR）
CSS 中的1px并不等于设备的1px！
设备像素即屏幕设置的分辨率。设置的分辨率不一定等于显示器的物理分辨率，大多数情况下，我们设置的分辨率与物理分辨率一致，显示效果才最佳。
CSS像素指在CSS中的单位PX。
- 在缩放级别为100%时，设备像素比率为1的设备上，1个CSS像素等于1个设备像素。
- 在缩放级别为100%时，retina设备上，1个CSS像素等于4个设备像素。
- 在缩放级别为100%时，设备像素比率为1.5的设备上，1个CSS像素等于1.5个设备像素。
- 在缩放级别为200%时，设备像素比率为1的设备上，1个CSS像素等于4个设备像素。
推荐阅读
作者：知行社
链接：
https://www.jianshu.com/p/3962ea2549d0來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
在线咨询
