移動(dòng)端不同于pc端，移動(dòng)端的設(shè)備眾多，不能將長(zhǎng)寬高寫(xiě)為固定的寬高，那樣的話在不同長(zhǎng)寬高比的移動(dòng)設(shè)備上就會(huì)顯示差距較大，在移動(dòng)端網(wǎng)頁(yè)布局的顯示不能追求完全的一致，只能是差距不大即可，這是有移動(dòng)設(shè)備的種類(lèi)繁多決定的。

比較好的布局原則是留白固定，寬高不可固定。
Viewport：
手機(jī)瀏覽器是把頁(yè)面放在一個(gè)虛擬的“窗口”（viewport）中，通常這個(gè)虛擬的“窗口”（viewport）比屏幕寬，這樣就不用把每個(gè)網(wǎng)頁(yè)擠到很小的窗口中（這樣會(huì)破壞沒(méi)有針對(duì)手機(jī)瀏覽器優(yōu)化的網(wǎng)頁(yè)的布局），用戶可以通過(guò)平移和縮放來(lái)看網(wǎng)頁(yè)的不同部分。

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

width：控制 viewport 的大小，可以指定的一個(gè)值，如 device-width 為設(shè)備的寬度（單位為縮放為 100% 時(shí)的 CSS 的像素）。
initial-scale: 第一次加載時(shí)候的縮放值
maximum-scale：頁(yè)面最大縮放的比，為1表示頁(yè)面不可放大。
minimum-scale：允許用戶縮放到的最小比例。

主流webapp的設(shè)置：`

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

表示故意舍棄viewport，不縮放頁(yè)面

DPI:（每英寸點(diǎn)數(shù))

物理像素: 個(gè)數(shù)是固定的，這是廠商在出廠時(shí)就設(shè)置好了的—— 一個(gè)設(shè)備的分辨率是固定的.

在viewport中，獲取到的，比如”width-device”，是邏輯像素。所以之前viewport的默認(rèn)值，所比對(duì)的大小，其實(shí)是邏輯像素的大小，而非物理像素的大小。

以iphone6為例
分辨率：1334*750
在不做任何縮放的條件下，iphone6的獲取到的’width-device’為375px，由此知設(shè)備像素比為2.

PPI一定比DPI大，不會(huì)小！！

media

<link rel="stylesheet" href="xxx.css" media="screen and (max-device-width: 480px)">

screen表示用于有屏幕的設(shè)備，
max-device-width表示屏幕的最大寬度。
上面語(yǔ)句表示：如果加載該頁(yè)面的設(shè)備的屏幕小于480像素，就應(yīng)用xxx.css式樣

總結(jié)

以上是生活随笔為你收集整理的移动端网页的基础制作的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。