移動端與PC端頁面佈局區別

時間 2019-12-09

標籤移動頁面佈局區別欄目無線简体版

原文原文鏈接

視口

視口是移動設備上用來顯示網頁的區域，通常會比移動設備可視區域大，寬度多是980px或者1024px，目的是爲了顯示下整個爲PC端設計的網頁，這樣帶來的後果是移動端會出現橫向滾動條，爲了不這種狀況，移動端會將視口縮放到移動端窗口的大小。這樣會讓網頁不容易觀看，能夠用 meta 標籤，name=「viewport 」來設置視口的大小，將視口的大小設置爲和移動設備可視區同樣的大小。css

設置方法以下( 快捷方式：meta:vp + tab )：app

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

pc端與移動端渲染網頁過程：
scala

視網膜屏幕（retina屏幕）清晰度解決方案

視網膜屏幕指的是屏幕的物理像素密度更高的屏幕，物理像素能夠理解爲屏幕上的一個發光點，無數發光的點組成的屏幕，視網膜屏幕比通常屏幕的物理像素點更小，常見有2倍的視網膜屏幕和3倍的視網膜屏幕，2倍的視網膜屏幕，它的物理像素點大小是通常屏幕的1/4,3倍的視網膜屏幕，它的物理像素點大小是通常屏幕的1/9。設計

圖像在視網膜屏幕上顯示的大小和在通常屏幕上顯示的大小同樣，可是因爲視網膜屏幕的物理像素點比通常的屏幕小，圖像在上面好像是被放大了，圖像會變得模糊，爲了解決這個問題，能夠使用比原來大一倍的圖像，而後用css樣式強制把圖像的尺寸設爲原來圖像尺寸的大小，就能夠解決模糊的問題。code

清晰度解決過程示意圖：
圖片

背景圖強制改變大小，能夠使用background新屬性it

background新屬性
background-size:class