基於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像素和設備像素的區別。圖片