html移动端——基础知识

1. 开发尺寸

iphone6 7 8：1倍图尺寸，宽375像素，高667像素。

开发：2倍图尺寸，750×1334。

iphonex及以上：目前市场主流 1倍图尺寸，宽375像素，高812像素。

开发：2倍图尺寸，750×1624。

2. 物理像素和逻辑像素

2.1 物理像素

设计的尺寸：pc端设计显示的尺寸和开发的尺寸是一样的。

2.2 逻辑像素

开发的尺寸：，由于屏幕越来越大，分辨率越来越高，导致设计的尺寸于现实的尺寸不符。

2.3 例子

不同的手机，分辨率相差很大：

iphone3：480*320
iphone4：960*640
iphone5：1136*640
iphone10：2436*1125
三星S20：3200*1440

把图片宽度设置成 320px：

iphone3 占满屏幕
iphone4 占 1/2
S20 占不到 1/4

2.4 问题由来

移动端网页刚刚兴起时，前端把某个 div 设置成了 300px，大约占屏幕一整行。后来屏幕越来越大，分辨率越来越高。

当一款手机，屏幕更优秀，而显示效果反而更难看（原来占一整行的东西，现在只缩在屏幕左边一半）。这是很令人困扰。

于是，生产商为了使显示效果好一点，决定把 300px 的宽度，用 2*300 个像素点来显示。这样，1px 在某些设备上是指一个像素，而有些，却是两个像素点。

结果就是乱套了，便有人造出了新的名字。用“物理像素”来代表原来像素的本意，用“逻辑像素”来代表后者。这样的优点是，不论手机屏幕多大、分辨率多少，在开发者看来，都是 300px～400px 左右。

后来衍生出了两倍屏、三倍屏这样的概念。两倍屏上，300px 就是 600 个像素那么宽；三倍屏上，300px 就是 900 个像素那么宽。于是，当你设置 border: 1px solid #000时，那个边框粗得使人抓狂。

3. 移动端单位

移动端开发的尺寸和手机显示的物理像素是不一样的

pc端：像素单位——px

移动端：弹性单位 ——%、vw、em

移动端开发：用em、rem单位

弹缩单位 ——em、rem

em是倍数：倍数是根据父级标签大小、改变尺寸

注：em最小值为12px，即父级标签设置尺寸小于12px，依旧安12px计算倍数。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			p{
				/* font-size: 2em; */
                font-size: 1em;
			}
			div{
				/* font-size:12px; */
                /* em依旧安12px计算尺寸 */
                font-size:10px;
			}
		</style>
	</head>
	<body>
		<div>
			<p>看文字大小</p>
		</div>
	</body>
</html>

rem也是倍数：

根据根标签尺寸大小，改变尺寸大小。 r->root根，根的倍数。根标签一般是html。

注：rem最小值为6px，即父级标签设置尺寸小于6px，依旧安6px计算倍数。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			p{
				/* font-size: 1rem; */
				font-size: 2rem;
			}	
			html{
                /* font-size:12px; */
                /* rem依旧安6px计算尺寸 */
				font-size:1px;
			}
		</style>
	</head>
	<body>
		<div>
			<p>看文字大小</p>
		</div>
	</body>
</html>