2022-07-17 分類: 網(wǎng)站建設(shè)
網(wǎng)站建設(shè) 做網(wǎng)站容易嗎" />
什么是響應(yīng)式?響應(yīng)式的頁面在不同的屏幕有不同的布局,換句話說,使用相同的html在不同的分辨率有不同的排版。如下圖所示:
響應(yīng)式布局是為了解決適配的問題,傳統(tǒng)的開發(fā)方式是pC端開發(fā)一套,手機(jī)端再開發(fā)一套,而使用響應(yīng)式布局只要開發(fā)一套就好了。因?yàn)樗怯玫耐瑯觝tml,所以它的JS邏輯交互也只需寫一套就好了,缺點(diǎn)是CSS比較重。傳統(tǒng)的手機(jī)端適配常見有三種解決方案,種是bootstrap的columns布局;第二種是使用全局的rem,先根據(jù)屏幕換算1rem等于多少個(gè)px,然后設(shè)置html標(biāo)簽的font-size為多少個(gè)rem,屏幕越大,則font-size越大,然后頁面所有的元素的寬高和字體大小都用rem等比例縮放;第三種是阿里的flex box,這種方案和第二種類似,不同點(diǎn)是頁面內(nèi)容的字體大小是用的px,而不是比例縮放的rem。種需要額外引入一個(gè)框架。第三種相對(duì)第二種來說應(yīng)該更合理點(diǎn),因?yàn)檎牡淖煮w常用的為14px或者16px,如果一個(gè)頁面在這個(gè)手機(jī)字號(hào)是15.5px,在另外一個(gè)手機(jī)又變成了14.9px,這樣可能會(huì)有點(diǎn)奇怪。
而使用響應(yīng)式布局就不需要進(jìn)行rem的換算,下面通過上圖的那個(gè)例子一步一步地分析怎么做響應(yīng)式。
1.設(shè)置不同分辨率頁面兩邊留白
先一個(gè)頁面的主體內(nèi)容有大的寬度,當(dāng)屏幕超過這個(gè)寬度時(shí)這個(gè)中間的主體內(nèi)容大就這么大了,不會(huì)再變大了,也就是說它固定一個(gè)大寬度,然后居中顯示,如大為1080px。然后當(dāng)大于1024px時(shí),頁面主體內(nèi)容小寬為960px,兩邊自動(dòng)留白;在500px到1024px之間兩邊保持留白40px;而當(dāng)小于500px時(shí)就認(rèn)為是手機(jī),兩邊留白20px。所以計(jì)算一下,container的代碼如下:
總體的思想是留白要合適,既不能留太多,導(dǎo)致中間內(nèi)容太窄,也不能讓中間的內(nèi)容顯得太大。這個(gè)其實(shí)和bootstrap的container思想一致,只是你可能要根據(jù)你自己的業(yè)務(wù)特點(diǎn)、用戶人群等做不同留白策略。
2.屏幕變小時(shí),一頭變窄,另一頭不變
當(dāng)屏幕變小或者瀏覽器窗口拉小時(shí),中間內(nèi)容的寬度就不能保持1080px,它得跟著變小,而在變小的過程中,往往要保持一邊不變,另一邊隨頁面變窄,如下圖所示:
右邊的結(jié)果欄寬度保持不變,左邊的表單欄寬度縮小。因?yàn)橛疫呉坏┚驼缓每戳?,如果右邊變窄,那么字體也要相應(yīng)縮小,字號(hào)一縮小,右邊上下留白就變得太大,這樣就不美觀了,所以只能采取右邊保持不動(dòng)的策略去縮小左邊的內(nèi)容。這種場(chǎng)景比較常見,右邊如果是一個(gè)頭像的話,它也不能跟著縮小,它一縮小高度也要跟著縮小,導(dǎo)致上下太空,所以這種情況也不能動(dòng)。
3.保持中間留白固定,縮小內(nèi)容寬度
左欄的寬度變小應(yīng)該怎么變呢?有一個(gè)原則,就是要保持中間的間距固定,而兩邊的內(nèi)容寬度相應(yīng)縮小,如下圖所示:
所以就要借助CSS3的calc,如下所示:
1
2
3
input{
width:calc((100%-20px)/2)
}
calc的兼容性IE10及以上支持,android 4及以下不支持,所以考慮到不支持的設(shè)備,可以簡(jiǎn)單做個(gè)兼容,如下代碼所示:
1
2
3
4
input{
width:48%;
width:calc((100%-20px)/2);
}
如果不支持calc就用48%,這樣差別其實(shí)不是很大,就是不是很精確。真的需要的話,你可以多寫幾個(gè)媒體查詢變得更精確。
4.左右布局變成上下布局
當(dāng)屏幕拉得很小的時(shí)候,左欄已經(jīng)縮得很小了,再變小就不協(xié)調(diào)了,所以這個(gè)時(shí)候要把左右布局改成上下布局,把右邊的內(nèi)容往下面放。因?yàn)橛覚谠诖笃恋臅r(shí)候是float:right,所以在中屏的時(shí)候覆蓋掉這個(gè)浮動(dòng)的屬性,變成float:none就可以了。原本右欄的內(nèi)容有四行,都比較短,可以考慮把它下面的三行排成一行,即讓它們浮動(dòng)。如下面代碼所示:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.cal-result{
float:right;
width:330px;
}
1
media(max-width:800px){
.cal-result{
float:none;
width:100%;
}
.cal-result.result{
float:left;
width:33%;
}
}
讓每一個(gè)result占1/3,然后浮動(dòng),效果如下:
5.寬度太小時(shí),自動(dòng)換行
特別是當(dāng)內(nèi)容是列表ul形式的時(shí)候,排不下的li應(yīng)當(dāng)自動(dòng)換到下一行。當(dāng)然也可以手動(dòng)控制,如下:
1
2
3
4
5
6
7
8
9
10
11
media(max-width:800px){
.result{
width:33%;
}
}
1
media(max-width:400px){
.result{
width:50%;
}
}
在屏幕寬度小于400的時(shí)候,每個(gè)結(jié)果就占50%,這樣就排成兩行了。這也是一種常用的辦法,但是在我們這個(gè)例子,如果數(shù)字比較小,在iphone6 375px的屏幕上還是排得下的,如果能保持在一行相對(duì)比較美觀。而且固定50%,如果當(dāng)數(shù)字比較大時(shí)也有可能會(huì)有重疊的危險(xiǎn),這個(gè)也有辦法,就是別寫死寬度,而是寫死m(xù)in-width為50%,這樣當(dāng)內(nèi)容比較長(zhǎng)時(shí),float的元素同一行排不下就會(huì)自動(dòng)換行。但是知名還是要個(gè)辦法讓它能根據(jù)內(nèi)容長(zhǎng)度自動(dòng)換行,當(dāng)然可以用JS計(jì)算,但是有點(diǎn)麻煩。
這個(gè)時(shí)候flex就派上用場(chǎng)了,很簡(jiǎn)單,只要設(shè)置兩個(gè)屬性:
1
2
3
4
5
.result-container{
display:flex;
justify-content:space-between;
flex-wrap:wrap;
}
space-between讓子元素挨著容器的兩邊等間距排列,而wrap屬性讓子元素自動(dòng)換行,當(dāng)容器寬度不夠的時(shí)候,就有了以下的效果:
這樣還有一個(gè)小問題,就是當(dāng)內(nèi)容如果剛剛好占滿時(shí),兩個(gè)項(xiàng)之間就沒有間距了,如下圖所示:
這樣就貼在一起了,由于flex的space-between不能指定小的space,所以只通過margin或者padding的方法,如給元素添加margin-right:
1
2
3
.result:not(:last-child){
margin-right:10px;
}
效果如下:
這樣比貼在一起顯示的效果好。
還有從大屏變成成小屏的時(shí)候有些字號(hào)主要是標(biāo)題的字號(hào)和間距要相應(yīng)調(diào)小,這種變小是階梯變化的,而不是像rem一樣連續(xù)變化,而且這種階梯一般只要有兩個(gè)就夠了,一個(gè)大屏的,一個(gè)小屏的。如果你需要做很多階梯的話,那你的排版很可能有問題。
6.使用響應(yīng)式圖片
如相同的頭圖,在電腦上需要使用大圖,但是手機(jī)上面使用小圖就好了,不然會(huì)造成手機(jī)上加載慢浪費(fèi)流量等問題,一個(gè)辦法是使用backgound-image結(jié)合媒體查詢,如下所示:
1
2
3
4
5
6
7
.banner{
background-image:url(/static/large.jpg);
}
media(max-width:500px){
background-image:url(/static/small.jpg);
}
這種方法的缺點(diǎn)是對(duì)SEO不太友好,因?yàn)槿绻褂胕mg標(biāo)簽還可以寫個(gè)alt屬性。
第二種常用辦法是使用img的srcset或者picture標(biāo)簽做響應(yīng)式圖片,這個(gè)我在《Effective前端7:加快頁面打開速度》已經(jīng)提到,這里不再重復(fù)。
這種響應(yīng)式圖片除了大小屏之外,還可以兼顧視網(wǎng)屏即dpr為2及以上的和普通屏dpr為1的屏幕,即在高dpr的屏幕使用2倍圖,而普通屏幕使用1倍圖。
7.其它問題處理
有些地方大小屏的排版差異比較大,例如有些內(nèi)容大屏的時(shí)候是挨在一起,而小屏離得比較遠(yuǎn),這個(gè)時(shí)候你可能得重復(fù)html,寫兩份的標(biāo)簽,大屏的時(shí)候隱藏掉小屏的html標(biāo)簽,小屏的時(shí)候隱藏掉大屏的html標(biāo)簽。并且這種情況不應(yīng)該是常例,如果你經(jīng)常要寫兩套,那說明你這個(gè)頁面可能不太適合寫響應(yīng)式,還不如直接寫兩套呢。
還有個(gè)問題,有時(shí)候你可能要借助rem/transform:scale做大小縮放,但這一定是下策,我們的原則還是要保持字號(hào)和間距不變,當(dāng)屏幕的跨度不是很大的時(shí)候。使用transform的后果是屏幕拉小的時(shí)候,內(nèi)容跟著變小了,但是由于transform不會(huì)造成重排,它占據(jù)的高度還是那么大,下面的內(nèi)容不會(huì)跟上來。這樣就得手動(dòng)計(jì)算內(nèi)容的高度。另外如果使用rem,就和響應(yīng)式的思想沖突了。如果頁面的一部分字號(hào)使用了rem,另一部分字號(hào)使用了px,這樣就不協(xié)調(diào)了,如果你全部寫rem那就不需要使用響應(yīng)式開發(fā)了。這個(gè)時(shí)候你可能要想一想,是不是UI出得有問題。讓UI重新調(diào)整。
還有,有時(shí)候可能會(huì)用到高度的媒體查詢,例如在高度小于多少的時(shí)候,不能讓彈框超出頁面的高度;在高度大于多少的時(shí)候,讓footer的定位fixed在底部,不然footer的下面可能會(huì)留白。
網(wǎng)頁題目:響應(yīng)式開發(fā)的心得-大連網(wǎng)站建設(shè)
網(wǎng)站網(wǎng)址:http://m.rwnh.cn/news10/180310.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷seo公司;服務(wù)項(xiàng)目有網(wǎng)站建設(shè)等
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容