資訊專欄INFORMATION COLUMN
摘要：電腦版的商城昨晚做完了，今天趕著做手機(jī)端的，提到手機(jī)端的網(wǎng)站第一個(gè)想到的就是要適應(yīng)不同手機(jī)屏幕的寬度，保證在不同手機(jī)上都能正常顯示給用戶，我之前做這類(lèi)網(wǎng)站都是無(wú)腦引進(jìn)的。
電腦版的商城昨晚做完了，今天趕著做手機(jī)端的，提到手機(jī)端的網(wǎng)站第一個(gè)想到的就是要 適應(yīng)不同手機(jī)屏幕的寬度，保證在不同手機(jī)上都能正常顯示給用戶，我之前做這類(lèi)網(wǎng)站都是無(wú)腦引進(jìn)bootstrap的。但前一個(gè)項(xiàng)目做完之后我發(fā)現(xiàn)bootstrap雖好，但里面的各種樣式我利用的很少，最多用到它排版，當(dāng)網(wǎng)站最后上傳的時(shí)候你會(huì)發(fā)現(xiàn)，即使壓縮之后，它也會(huì)占用相當(dāng)大的一部分，所以這次我想自己用原生寫(xiě)，響應(yīng)式開(kāi)發(fā)（我現(xiàn)在知道的尚淺）目前我了解有
1.百分比法：
顧名思義，頁(yè)面的元素的margin，padding，width，height，等等都用%來(lái)計(jì)算，CSS中的百分比中的百指的是什么，指的是父元素，所有百分比都是這樣的。子元素寬度50%，那么父元素的寬度就是百，子元 素的padding-left：50%，父元素的寬度是百，子元素的margin-top:20%，那么父元素的高是百。所以body默認(rèn)寬度是屏幕寬度 （PC中指的是瀏覽器寬度）子孫元素按百分比定位（或指定尺寸）就可以了，這只適合布局簡(jiǎn)單的頁(yè)面，復(fù)雜的頁(yè)面實(shí)現(xiàn)很困難。
2.媒體查詢：
這個(gè)是css3中給出的，我們要解決的問(wèn)題是適應(yīng)手機(jī)屏幕，這個(gè)媒體查詢正是為解決這個(gè)問(wèn)題而生，媒體查詢的功能就是為不同的媒體設(shè)置不同的css樣 式，這里的“媒體”包括頁(yè)面尺寸，設(shè)備屏幕尺寸等，最常用的形式
phone:@media screen and (max-width：767px) {/手機(jī)中樣式/}
pad：@media screen and (max-width：991px)and(min-width:768) {/平板中樣式/}
pc:@media screen and (min-width：992px){/電腦中樣式/}
...（你還可以設(shè)置更多節(jié)點(diǎn)）
用媒體查詢的話要保證每個(gè)像素下都有對(duì)應(yīng)的適配效果顯然你要設(shè)置更小的寬度范圍；
3.還有就是css3的單位rem：
rem就是將根節(jié)點(diǎn)html的font-size的值作為整個(gè)頁(yè)面的基準(zhǔn)尺寸，例如那么1rem=10px;如何做到適配呢？那就要用到j(luò)s在頁(yè)面加載時(shí)獲取window的寬度（瀏覽器窗口的寬度）$(window).width();在開(kāi)發(fā)手機(jī)頁(yè)面的時(shí)候，一般我們?cè)O(shè)置最大寬度為640px，因?yàn)?40px可以保證在至今最寬的手機(jī)上顯示時(shí)網(wǎng)頁(yè)兩端剛好貼合屏幕，那接下來(lái)我就舉一個(gè)小例子。
屏幕放大縮小這三個(gè)div也同樣還在一行等比放大縮小
html
css123
js
注意這里有一個(gè)小坑，當(dāng)你把這個(gè)小demo拿到谷歌瀏覽器里面驗(yàn)證的時(shí)候，你會(huì)發(fā)現(xiàn)開(kāi)始這3個(gè)div會(huì)隨著你瀏覽器窗口縮小而縮小，到達(dá)某個(gè)值后就不動(dòng)了，原因是谷歌瀏覽器默認(rèn)支持html的font-size最小值為10px;在小于這個(gè)值就不會(huì)再小了，這是我當(dāng)時(shí)碰到的問(wèn)題花了快兩個(gè)小時(shí)上網(wǎng)找，一遍遍演示也都沒(méi)想明白，最后終于查到這么個(gè)非人為原因.
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/92444.html
摘要：大家知道可以用來(lái)做響應(yīng)式布局，只是元素上的樣式需要根據(jù)屏幕寬度來(lái)指定。今天突然想到這個(gè)單位，發(fā)現(xiàn)用它來(lái)做響應(yīng)式布局實(shí)在太方便了。只需一行屏幕標(biāo)準(zhǔn)寬，全部寬度是，即也就是每像素。這個(gè)值也可根據(jù)自己需要調(diào)整數(shù)值。具體實(shí)現(xiàn)的完整代碼請(qǐng)參考 大家知道rem可以用來(lái)做響應(yīng)式布局，只是html元素上的font-size樣式需要根據(jù)屏幕寬度來(lái)指定。 之前有用@media媒體查詢，根據(jù)各種屏幕寬度寫(xiě)h...
摘要：做移動(dòng)端自適應(yīng)時(shí)可能很多人都對(duì)自適應(yīng)和之間的關(guān)系產(chǎn)生疑問(wèn)也有一些人會(huì)疑慮比如我的自適應(yīng)方案沒(méi)有加會(huì)不會(huì)出問(wèn)題針對(duì)這些疑問(wèn)我說(shuō)一下我的見(jiàn)解。 做移動(dòng)端自適應(yīng)時(shí)可能很多人都對(duì)自適應(yīng)和dpr之間的關(guān)系產(chǎn)生疑問(wèn),也有一些人會(huì)疑慮比如我的自適應(yīng)方案沒(méi)有加dpr會(huì)不會(huì)出問(wèn)題,針對(duì)這些疑問(wèn)我說(shuō)一下我的見(jiàn)解。 1. 什么是尺寸自適應(yīng) 首先標(biāo)題說(shuō)的自適應(yīng),可能自適應(yīng)在不同人眼里理解不同，特別與響應(yīng)式的關(guān)...
摘要：做移動(dòng)端自適應(yīng)時(shí)可能很多人都對(duì)自適應(yīng)和之間的關(guān)系產(chǎn)生疑問(wèn)也有一些人會(huì)疑慮比如我的自適應(yīng)方案沒(méi)有加會(huì)不會(huì)出問(wèn)題針對(duì)這些疑問(wèn)我說(shuō)一下我的見(jiàn)解。 做移動(dòng)端自適應(yīng)時(shí)可能很多人都對(duì)自適應(yīng)和dpr之間的關(guān)系產(chǎn)生疑問(wèn),也有一些人會(huì)疑慮比如我的自適應(yīng)方案沒(méi)有加dpr會(huì)不會(huì)出問(wèn)題,針對(duì)這些疑問(wèn)我說(shuō)一下我的見(jiàn)解。 1. 什么是尺寸自適應(yīng) 首先標(biāo)題說(shuō)的自適應(yīng),可能自適應(yīng)在不同人眼里理解不同，特別與響應(yīng)式的關(guān)...
摘要：做移動(dòng)端自適應(yīng)時(shí)可能很多人都對(duì)自適應(yīng)和之間的關(guān)系產(chǎn)生疑問(wèn)也有一些人會(huì)疑慮比如我的自適應(yīng)方案沒(méi)有加會(huì)不會(huì)出問(wèn)題針對(duì)這些疑問(wèn)我說(shuō)一下我的見(jiàn)解。 做移動(dòng)端自適應(yīng)時(shí)可能很多人都對(duì)自適應(yīng)和dpr之間的關(guān)系產(chǎn)生疑問(wèn),也有一些人會(huì)疑慮比如我的自適應(yīng)方案沒(méi)有加dpr會(huì)不會(huì)出問(wèn)題,針對(duì)這些疑問(wèn)我說(shuō)一下我的見(jiàn)解。 1. 什么是尺寸自適應(yīng) 首先標(biāo)題說(shuō)的自適應(yīng),可能自適應(yīng)在不同人眼里理解不同，特別與響應(yīng)式的關(guān)...
閱讀 552·2019-08-30 15:55
閱讀 960·2019-08-29 15:35
閱讀 1216·2019-08-29 13:48
閱讀 1926·2019-08-26 13:29
閱讀 2951·2019-08-23 18:26
閱讀 1264·2019-08-23 18:20
閱讀 2847·2019-08-23 16:43
閱讀 2721·2019-08-23 15:58
