
響應(yīng)式網(wǎng)站開(kāi)發(fā)



視口
視口是移動(dòng)設(shè)備上用來(lái)顯示網(wǎng)頁(yè)的區(qū)域,一般會(huì)比移動(dòng)設(shè)備可視區(qū)域大,寬度可能是980px或者1024px,目的是為了顯示下整個(gè)為PC端設(shè)計(jì)的網(wǎng)頁(yè),這樣帶來(lái)的后果是移動(dòng)端會(huì)出現(xiàn)橫向滾動(dòng)條,為了避免這種情況,移動(dòng)端會(huì)將視口縮放到移動(dòng)端窗口的大小。這樣會(huì)讓網(wǎng)頁(yè)不容易觀看,可以用 meta 標(biāo)簽,name=“viewport ” 來(lái)設(shè)置視口的大小,將視口的大小設(shè)置為和移動(dòng)設(shè)備可視區(qū)一樣的大小。
設(shè)置方法如下( 快捷方式:meta:vp + tab ):
...... ......
pc端與移動(dòng)端渲染網(wǎng)頁(yè)過(guò)程:
視網(wǎng)膜屏幕指的是屏幕的物理像素密度更高的屏幕,物理像素可以理解為屏幕上的一個(gè)發(fā)光點(diǎn),無(wú)數(shù)發(fā)光的點(diǎn)組成的屏幕,視網(wǎng)膜屏幕比一般屏幕的物理像素點(diǎn)更小,常見(jiàn)有2倍的視網(wǎng)膜屏幕和3倍的視網(wǎng)膜屏幕,2倍的視網(wǎng)膜屏幕,它的物理像素點(diǎn)大小是一般屏幕的1/4,3倍的視網(wǎng)膜屏幕,它的物理像素點(diǎn)大小是一般屏幕的1/9。
圖像在視網(wǎng)膜屏幕上顯示的大小和在一般屏幕上顯示的大小一樣,但是由于視網(wǎng)膜屏幕的物理像素點(diǎn)比一般的屏幕小,圖像在上面好像是被放大了,圖像會(huì)變得模糊,為了解決這個(gè)問(wèn)題,可以使用比原來(lái)大一倍的圖像,然后用css樣式強(qiáng)制把圖像的尺寸設(shè)為原來(lái)圖像尺寸的大小,就可以解決模糊的問(wèn)題。
清晰度解決過(guò)程示意圖:
背景圖強(qiáng)制改變大小,可以使用background新屬性
background新屬性
background-size:
length:用長(zhǎng)度值指定背景圖像大小。不允許負(fù)值。
percentage:用百分比指定背景圖像大小。不允許負(fù)值。
auto:背景圖像的真實(shí)大小。
cover:將背景圖像等比縮放到完全覆蓋容器,背景圖像有可能超出容器。
contain:將背景圖像等比縮放到寬度或高度與容器的寬度或高度相等,背景圖像始終被包含在容器內(nèi)。
PC及移動(dòng)端頁(yè)面適配方法
設(shè)備屏幕有多種不同的分辨率,頁(yè)面適配方案有如下幾種:
1、全適配:響應(yīng)式布局+流體布局
2、移動(dòng)端適配:
流體布局+少量響應(yīng)式
基于rem的布局
流體布局
流體布局,就是使用百分比來(lái)設(shè)置元素的寬度,元素的高度按實(shí)際高度寫(xiě)固定值,流體布局中,元素的邊線無(wú)法用百分比,可以使用樣式中的計(jì)算函數(shù) calc() 來(lái)設(shè)置寬度,或者使用 box-sizing 屬性將盒子設(shè)置為從邊線計(jì)算盒子尺寸。
calc()
可以通過(guò)計(jì)算的方式給元素加尺寸,比如: width:calc(25% - 4px);
box-sizing
1、content-box 默認(rèn)的盒子尺寸計(jì)算方式
2、border-box 置盒子的尺寸計(jì)算方式為從邊框開(kāi)始,盒子的尺寸,邊框和內(nèi)填充算在盒子尺寸內(nèi)
響應(yīng)式布局
響應(yīng)式布局就是使用媒體查詢的方式,通過(guò)查詢?yōu)g覽器寬度,不同的寬度應(yīng)用不同的樣式塊,每個(gè)樣式塊對(duì)應(yīng)的是該寬度下的布局方式,從而實(shí)現(xiàn)響應(yīng)式布局。響應(yīng)式布局的頁(yè)面可以適配多種終端屏幕(pc、平板、手機(jī))。
相應(yīng)布局的偽代碼如下:
@media (max-width:960px){ .left_con{width:58%;} .right_con{width:38%;} } @media (max-width:768px){ .left_con{width:;} .right_con{width:;} }
基于rem的布局
首先了解em單位,em單位是參照元素自身的文字大小來(lái)設(shè)置尺寸,rem指的是參照根節(jié)點(diǎn)的文字大小,根節(jié)點(diǎn)指的是html標(biāo)簽,設(shè)置html標(biāo)簽的文字大小,其他的元素相關(guān)尺寸設(shè)置用rem,這樣,所有元素都有了統(tǒng)一的參照標(biāo)準(zhǔn),改變html文字的大小,就會(huì)改變所有元素用rem設(shè)置的尺寸大小。
cssrem安裝
cssrem插件可以動(dòng)態(tài)地將px尺寸換算成rem尺寸
下載本項(xiàng)目,比如:git clone https://github.com/flashlizi/cssrem 進(jìn)入packages目錄:Sublime Text -> Preferences -> Browse Packages… 復(fù)制下載的cssrem目錄到剛才的packges目錄里。 重啟Sublime Text。
配置參數(shù) 參數(shù)配置文件:Sublime Text -> Preferences -> Package Settings -> cssrem px_to_rem - px轉(zhuǎn)rem的單位比例,默認(rèn)為40。 max_rem_fraction_length - px轉(zhuǎn)rem的小數(shù)部分的更大長(zhǎng)度。默認(rèn)為6。 available_file_types - 啟用此插件的文件類(lèi)型。默認(rèn)為:[".css", “.less”, “.sass”]。
1、結(jié)合流體布局和響應(yīng)式布局制作天天生鮮移動(dòng)端首頁(yè)頁(yè)面
2、使用基于rem的布局方式制作天天生鮮移動(dòng)端首頁(yè)頁(yè)面
天天生鮮首頁(yè)效果圖如下:
【版權(quán)聲明】:本站內(nèi)容來(lái)自于與互聯(lián)網(wǎng)(注明原創(chuàng)稿件除外),供訪客免費(fèi)學(xué)習(xí)需要。如文章或圖像侵犯到您的權(quán)益,請(qǐng)及時(shí)告知,我們第一時(shí)間刪除處理!謝謝!
響應(yīng)式網(wǎng)站開(kāi)發(fā)
售后服務(wù):13534259410 (7×24小時(shí))
在線 Q Q:253849310 (售前咨詢)
深圳無(wú)雙科技,專(zhuān)注于深圳網(wǎng)站建設(shè)、深圳網(wǎng)站設(shè)計(jì)、深圳網(wǎng)站制作。
服務(wù)客戶超3000家,一站式網(wǎng)站建設(shè)及推廣營(yíng)銷(xiāo)解決方案提供商。
我們的價(jià)值觀:誠(chéng)信、坦誠(chéng)、盡責(zé)、創(chuàng)新。期待與您合作!