基于REM的移动端响应式适配方案（未完待续）

时间 2021-08-14

标签 html ide scala code htm blog 图片 utf-8 开发栏目无线繁體版

原文原文链接

视口

在前一段时间，我曾经写过一篇关于viewport的文章。最近因为在接触移动端开发，对viewport有了新的理解。因而，打算从新写一篇文章，介绍移动端视口的相关概念。html

关于这篇文章说到的全部知识，本质上离不开如下代码ide

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />

@media all and (max-width: 320px) {
    // do something
}

实例代码scala

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
	<title></title>
	<style>
		@media all and (max-width: 320px) {
		    body{
		    	background-color: red;
		    }
	</style>
</head>
<body>
	
</body>
</html>

了解过移动端开发的朋友，其实对以上的代码就不会陌生。上面的代码，主要涉及到meta视口标签与媒体查询。单单以上简短的代码就须要明白：code

像素(pixel)
视口(viewport)
分辨率(resolution)与设备像素比(device-pixel-ratio)
meta视口标签
媒体查询(media query)
JavaScript相关的属性和方法
如何实现移动端响应式适配的问题

像素

在移动端上，所谓的像素分为两种htm

CSS像素：CSS像素就是咱们在编写CSS代码时的像素。
设备像素：设备屏幕的物理像素，任何设备的物理像素的数量都是固定的。
1个CSS像素等于多少个设备像素取决于屏幕特性(是不是高清屏)和用户缩放的比例。当用户将屏幕从100%放大到200%时，1个CSS像素等于2个设备像素，反之相反；当屏幕为Retina高清屏(如iPhone6，dpr=2)时，1个CSS像素就等于2个设备像素，反之相反。blog

须要明白一点的是，2个设备像素并非说它扩大了两倍，而是说在页面上仍然显示的是1px(1个CSS像素)，可是这1px是由2个设备像素组成。像素点变多了，所以图像会变得更加清晰。下面这幅图大体说明了CSS像素和设备像素的区别。图片