基于rem的移动端响应式适配方案(详解)
版权申诉
132 浏览量
2021-01-19
16:53:58
上传
评论
收藏 143KB PDF 举报
基于基于rem的移动端响应式适配方案的移动端响应式适配方案(详解详解)
视口视口
在前一段时间，我曾经写过一篇关于viewport的文章。最近由于在接触移动端开发，对viewport有了新的理解。于是，打算重
新写一篇文章，介绍移动端视口的相关概念。
关于这篇文章说到的所有知识，本质上离不开以下代码
<meta name="viewport" content="width=device-width, initial-scala=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
@media all and (max-width: 320px) {
// do something
}
了解过移动端开发的朋友，其实对以上的代码就不会陌生。上面的代码，主要涉及到meta视口标签与媒体查询。单单以上简
短的代码就需要明白：
像素像素(pixel)
视口视口(viewport)
分辨率分辨率(resolution)
meta视口标签视口标签
媒体查询媒体查询(media query)
JavaScript相关的属性和方法相关的属性和方法
如何实现移动端响应式适配的问题如何实现移动端响应式适配的问题
那就进入主题吧：）
像素像素
在移动端上，所谓的像素分为两种
CSS像素：CSS像素就是我们在编写CSS代码时的像素。
设备像素：设备屏幕的物理像素，任何设备的物理像素的数量都是固定的。
1个CSS像素等于多少个设备像素取决于屏幕特性(是否是高清屏)和用户缩放的比例。当用户将屏幕从100%放大到200%时，1
个CSS像素等于2个设备像素，反之相反；当屏幕为Retina高清屏(如iPhone6，dpr=2)时，1个CSS像素就等于2个设备像素，
反之相反。
需要明白一点的是，2个设备像素并不是说它扩大了两倍，而是说在页面上仍然显示的是1px(1个CSS像素)，但是这1px是由2
个设备像素组成。像素点变多了，因此图像会变得更加清晰。下面这幅图大致说明了CSS像素和设备像素的区别。
视口视口
在移动端上，存在三种不同的视口。
布局视口：在PC端上，布局视口等于浏览器窗口的宽度。而在移动端上，由于要使为PC端浏览器设计的网站能够完全显示在
移动端的小屏幕里，此时的布局视口会远大于移动设备的屏幕。在移动端，默认情况下，布局视口等于浏览器窗口宽度。布局
视口限制了CSS的布局。在JavaScirpt上获取布局视口的宽度可以通过document.documentElement.clientWidth |
document.body.clientWidth得到。
资源评论
