響應(yīng)式網(wǎng)頁(yè)開(kāi)發(fā)注意事項(xiàng)

2021-05-24 分類(lèi)：網(wǎng)站建設(shè)

由于網(wǎng)頁(yè)會(huì)根據(jù)屏幕寬度調(diào)整布局，所以不能使用絕對(duì)寬度的布局，也不能使用具有絕對(duì)寬度的元素。這一條非常重要。

具體說(shuō)：

一．CSS代碼不能指定像素寬度：

width:xxx px;

只能指定百分比寬度：

width: xx%;

或者：width:auto;

這里開(kāi)發(fā)是指一個(gè)網(wǎng)頁(yè)不僅能用在pc上，也能同時(shí)用于移動(dòng)端，但是對(duì)于webapp這種還是需要單獨(dú)做一個(gè)webapp使用的頁(yè)面。

二. 相對(duì)大小的字體

字體也不能使用絕對(duì)大小（px），而只能使用相對(duì)大小（em）。

body {

font: normal 100%Helvetica, Arial, sans-serif;

}

上面的代碼指定，字體大小是頁(yè)面默認(rèn)大小的100%，即16像素。

h1 {

font-size: 1.5em;

}

然后，h1的大小是默認(rèn)大小的1.5倍，即24像素（24/16=1.5）。

small {

font-size: 0.875em;

}

small元素的大小是默認(rèn)大小的0.875倍，即14像素（14/16=0.875）。

三. 流動(dòng)布局（fluid grid）

"流動(dòng)布局"的含義是，各個(gè)區(qū)塊的位置都是浮動(dòng)的，不是固定不變的。

.main {

float: right;

width: 70%;

}

.leftBar {

float: left;

width: 25%;

}

float的好處是，如果寬度太小，放不下兩個(gè)元素，后面的元素會(huì)自動(dòng)滾動(dòng)到前面元素的下方，不會(huì)在水平方向overflow（溢出），避免了水平滾動(dòng)條的出現(xiàn)。

另外，絕對(duì)定位（position:absolute）的使用，也要非常小心。

四. 圖片的自適應(yīng)（fluid image）

除了布局和文本，"自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)"還必須實(shí)現(xiàn)圖片的自動(dòng)縮放。

這只要一行CSS代碼：

img { max-width:100%;}

這行代碼對(duì)于大多數(shù)嵌入網(wǎng)頁(yè)的視頻也有效，所以可以寫(xiě)成：

img, object {max-width: 100%;}

老版本的IE不支持max-width，所以只好寫(xiě)成：

img { width: 100%; }

五．

iPhone的設(shè)計(jì)標(biāo)準(zhǔn)，狀態(tài)欄和導(dǎo)航欄的獨(dú)立像素高度分別為40px和88px。

由于Android系統(tǒng)可以更改狀態(tài)欄和導(dǎo)航欄的高度，這里可以取默認(rèn)值為48px和100px（這些尺寸網(wǎng)上均可查）。

那么就會(huì)把網(wǎng)頁(yè)內(nèi)容往下擠，進(jìn)入盲區(qū)（根據(jù)不同的布局方式可能擠出視口，即可視區(qū)域之下，）。取這兩個(gè)系統(tǒng)者的大值為148（48+100）,如下圖5，設(shè)計(jì)稿要盡量保證單頁(yè)下面沒(méi)有重要內(nèi)容。

那么在所有屏幕大小上把重要內(nèi)容顯示完全，就要注意市面上存在的小尺寸手機(jī)屏幕，現(xiàn)在絕大部分智能手機(jī)分辨率都在640x960px（iPhone4分辨率）之上，所以只要把重要內(nèi)容放在上圖5中的盲區(qū)之上即可。計(jì)算后的最安全高度為812（960-148=812）。

在此總結(jié)，一般情況下，以現(xiàn)有市場(chǎng)上流行的移動(dòng)智能手機(jī)，單頁(yè)翻轉(zhuǎn)（非延伸向下的長(zhǎng)頁(yè)面）設(shè)計(jì)稿尺寸為640×1136，在高度為812處設(shè)置一條安全線(xiàn)（參考線(xiàn)），將重要的內(nèi)容布局在這條安全線(xiàn)之上。

一般情況下，H5頁(yè)面設(shè)計(jì)稿做成640x1136px是最為穩(wěn)妥的尺寸，在812px高度處增加一條安全線(xiàn)，重要內(nèi)容在此線(xiàn)之上（網(wǎng)上有些文章說(shuō)安全線(xiàn)是960px處，個(gè)人認(rèn)為不太準(zhǔn)確）。既保證了在移動(dòng)設(shè)備上顯示清晰，也保證了素材的最小尺寸。

本文名稱(chēng)：響應(yīng)式網(wǎng)頁(yè)開(kāi)發(fā)注意事項(xiàng)
文章轉(zhuǎn)載：http://www.2m8n56k.cn/news16/114816.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站維護(hù)、網(wǎng)站營(yíng)銷(xiāo)、網(wǎng)站改版、網(wǎng)站策劃、定制開(kāi)發(fā)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

企業(yè)網(wǎng)站需求文檔-精簡(jiǎn)版 2021-05-24
下一代超級(jí)互聯(lián)網(wǎng)將是5G+AI+LOT創(chuàng)造的 2021-05-23
沒(méi)有好用的網(wǎng)站？那是你還沒(méi)看到這些！ 2021-05-23
關(guān)于電商設(shè)計(jì)的那些事兒，此文講的最全面！ 2021-05-23
可以做外地的客戶(hù)網(wǎng)站嗎？怎么做？ 2021-05-23
制作企業(yè)網(wǎng)站說(shuō)明 2021-05-23
網(wǎng)站如何上傳其它文件并下載 2021-05-23

中文字幕第五页-中文字幕第页-中文字幕韩国-中文字幕最新-国产尤物二区三区在线观看-国产尤物福利视频一区二区

響應(yīng)式網(wǎng)頁(yè)開(kāi)發(fā)注意事項(xiàng)