時間：2023-09-03 01:42:01 | 來源：網(wǎng)站運營
時間：2023-09-03 01:42:01 來源：網(wǎng)站運營
CSS布局系列三: 前端響應式布局原理與方案：這里只轉載好的文章，方便自己學習，強烈建議去看原帖：前端響應式布局原理與方案（詳細版）
在線咨詢
CSS比較重。下面是博客網(wǎng)站對不同設備適配后的結果，分別是iPhone5/SE,iphone6/7/8,iphone 6/7/8 plus,ipad pro,dell臺式寬屏(1440 X 900)。CSS3媒體查詢可以讓我們針對不同的媒體類型定義不同的樣式，當重置瀏覽器窗口大小的過程中，頁面也會根據(jù)瀏覽器的寬度和高度重新渲染頁面。600px,900px,1200px,1800px作為分割點，可以適配到常見的14個機型：480px,800px,1400px,1400pxBootstrap是怎么進行斷點的呢？min-width，PC端優(yōu)先使用的max-width。/* iphone6 7 8 */body { background-color: yellow;}/* iphone 5 */@media screen and (max-width: 320px) { body { background-color: red; }}/* iphoneX */@media screen and (min-width: 375px) and (-webkit-device-pixel-ratio: 3) { body { background-color: #0FF000; }}/* iphone6 7 8 plus */@media screen and (min-width: 414px) { body { background-color: blue; }}/* ipad */@media screen and (min-width: 768px) { body { background-color: green; }}/* ipad pro */@media screen and (min-width: 1024px) { body { background-color: #FF00FF; }}/* pc */@media screen and (min-width: 1100px) { body { background-color: black; }}/* pc width > 1024px */ body { background-color: yellow; }/* ipad pro */@media screen and (max-width: 1024px) { body { background-color: #FF00FF; }}/* ipad */@media screen and (max-width: 768px) { body { background-color: green; }}/* iphone6 7 8 plus */@media screen and (max-width: 414px) { body { background-color: blue; }}/* iphoneX */@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 3) { body { background-color: #0FF000; }}/* iphone6 7 8 */@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 2) { body { background-color: #0FF000; }}/* iphone5 */@media screen and (max-width: 320px) { body { background-color: #0FF000; }}CSS3支持最大最小高，可以將百分比和max(min)一起結合使用來定義元素在不同設備下的寬高。/* pc width > 1100px */html, body { margin: 0;padding: 0;width: 100%;height: 100%;}aside { width: 10%; height: 100%; background-color: red; float: left;}main { height: 100%; background-color: blue; overflow: hidden;}/* ipad pro */@media screen and (max-width: 1024px) { aside { width: 8%; background-color: yellow; }}/* ipad */@media screen and (max-width: 768px) { aside { float: none; width: 100%; height: 10%; background-color: green; } main { height: calc(100vh - 10%); background-color: red; }}/* iphone6 7 8 plus */@media screen and (max-width: 414px) { aside { float: none; width: 100%; height: 5%; background-color: yellow; } main { height: calc(100vh - 5%); background-color: red; }}/* iphoneX */@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 3) { aside { float: none; width: 100%; height: 10%; background-color: blue; } main { height: calc(100vh - 10%); background-color: red; }}/* iphone6 7 8 */@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 2) { aside { float: none; width: 100%; height: 3%; background-color: black; } main { height: calc(100vh - 3%); background-color: red; }}/* iphone5 */@media screen and (max-width: 320px) { aside { float: none; width: 100%; height: 7%; background-color: green; } main { height: calc(100vh - 7%); background-color: red; }}height或width中使用百分比，是相對于子元素的直接父元素，width相對于父元素的width，height相對于父元素的height；子元素的top和bottom如果設置百分比，則相對于直接非static定位(默認定位)的父元素的高度，同樣子元素的left和right如果設置百分比，則相對于直接非static定位(默認定位的)父元素的寬度；子元素的padding如果設置百分比，不論是垂直方向或者是水平方向，都相對于直接父親元素的width，而與父元素的height無關。跟padding一樣，margin也是如此，子元素的margin如果設置成百分比，不論是垂直方向還是水平方向，都相對于直接父元素的width；border-radius不一樣，如果設置border-radius為百分比，則是相對于自身的寬度，除了border-radius外，還有比如translate、background-size等都是相對于自身的；width和height相對于父元素的width和height，而margin、padding不管垂直還是水平方向都相對比父元素的寬度、border-radius則是相對于元素自身等等，造成我們使用百分比單位容易使布局問題變得復雜。font-size來決定大小的, 根元素的font-size相當于提供了一個基準，當頁面的size發(fā)生變化時，只需要改變font-size的值，那么以rem為固定單位的元素的大小也會發(fā)生響應的變化。 因此，如果通過rem來實現(xiàn)響應式的布局，只需要根據(jù)視圖容器的大小，動態(tài)的改變font-size即可（而em是相對于父元素的）。rem做單位（首先在HTML總設置一個基準值：px和rem的對應比例，然后在效果圖上獲取px值，布局的時候轉化為rem值)font-size的大小，也就是說css樣式和js代碼有一定的耦合性，且必須將改變font-size的代碼放在css樣式之前/*上述代碼中將視圖容器分為10份，font-size用十分之一的寬度來表示，最后在header標簽中執(zhí)行這段代碼，就可以動態(tài)定義font-size的大小，從而1rem在不同的視覺容器中表示不同的大小，用rem固定單位可以實現(xiàn)不同容器內(nèi)布局的自適應。*/function refreshRem() { var docEl = doc.documentElement; var width = docEl.getBoundingClientRect().width; var rem = width / 10; docEl.style.fontSize = rem + 'px'; flexible.rem = win.rem = rem;}win.addEventListener('resize', refreshRem);REM布局也是目前多屏幕適配的最佳方式。默認情況下我們html標簽的font-size為16px,我們利用媒體查詢，設置在不同設備下的字體大小。/* pc width > 1100px */html{ font-size: 100%;}body { background-color: yellow; font-size: 1.5rem;}/* ipad pro */@media screen and (max-width: 1024px) { body { background-color: #FF00FF; font-size: 1.4rem; }}/* ipad */@media screen and (max-width: 768px) { body { background-color: green; font-size: 1.3rem; }}/* iphone6 7 8 plus */@media screen and (max-width: 414px) { body { background-color: blue; font-size: 1.25rem; }}/* iphoneX */@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 3) { body { background-color: #0FF000; font-size: 1.125rem; }}/* iphone6 7 8 */@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 2) { body { background-color: #0FF000; font-size: 1rem; }}/* iphone5 */@media screen and (max-width: 320px) { body { background-color: #0FF000; font-size: 0.75rem; }}css3中引入了一個新的單位vw/vh，與視圖窗口有關，vw表示相對于視圖窗口的寬度，vh表示相對于視圖窗口高度，除了vw和vh外，還有vmin和vmax兩個相關的單位。各個單位具體的含義如下：| 單位 | 含義 |
|---|
| 單位 | 含義 |
|---|---|
| % | 大部分相對于祖先元素，也有相對于自身的情況比如（border-radius、translate等) |
| vw/vh | 相對于視窗的尺寸 |
vw單位與百分比類似，單確有區(qū)別，前面我們介紹了百分比單位的換算困難，這里的vw更像"理想的百分比單位"。任意層級元素，在使用vw單位的情況下，1vw都等于視圖寬度的百分之一。Sass函數(shù)編譯//iPhone 6尺寸作為設計稿基準$vm_base: 375; @function vw($px) { @return ($px / 375) * 100vw;}vw作為單位.mod_nav { background-color: #fff; &_list { display: flex; padding: vw(15) vw(10) vw(10); // 內(nèi)間距 &_item { flex: 1; text-align: center; font-size: vw(10); // 字體大小 &_logo { display: block; margin: 0 auto; width: vw(40); // 寬度 height: vw(40); // 高度 img { display: block; margin: 0 auto; max-width: 100%; } } &_name { margin-top: vw(2); } } }}transform屬性scale實現(xiàn)(感覺和這節(jié)要講的內(nèi)容一點關系都沒有).mod_grid { position: relative; &::after { // 實現(xiàn)1物理像素的下邊框線 content: ''; position: absolute; z-index: 1; pointer-events: none; background-color: #ddd; height: 1px; left: 0; right: 0; top: 0; @media only screen and (-webkit-min-device-pixel-ratio: 2) { -webkit-transform: scaleY(0.5); -webkit-transform-origin: 50% 0%; } } ...}padding-top實現(xiàn)(感覺和這節(jié)要講的內(nèi)容一點關系都沒有).mod_banner { position: relative; padding-top: percentage(100/700); // 使用padding-top height: 0; overflow: hidden; img { width: 100%; height: auto; position: absolute; left: 0; top: 0; }}vw適配后的頁面效果很好，但是它是利用視口單位實現(xiàn)的布局，依賴視口大小而自動縮放，無論視口過大還是過小，它也隨著時候過大或者過小，失去了最大最小寬度的限制，此時我們可以結合rem來實現(xiàn)布局vw單位，這樣就可以實現(xiàn)動態(tài)改變其大小body加上最大寬度和最小寬度// rem 單位換算：定為 75px 只是方便運算，750px-75px、640-64px、1080px-108px，如此類推$vm_fontsize: 75; // iPhone 6尺寸的根元素大小基準值@function rem($px) { @return ($px / $vm_fontsize ) * 1rem;}// 根元素大小使用 vw 單位$vm_design: 750;html { font-size: ($vm_fontsize / ($vm_design / 2)) * 100vw; // 同時，通過Media Queries 限制根元素最大最小值 @media screen and (max-width: 320px) { font-size: 64px; } @media screen and (min-width: 540px) { font-size: 108px; }}// body 也增加最大最小寬度限制，避免默認100%寬度的 block 元素跟隨 body 而過大過小body { max-width: 540px; min-width: 320px;}img { display: inline-block; max-width: 100%; height: auto;}inline-block 元素相對于它周圍的內(nèi)容以內(nèi)聯(lián)形式呈現(xiàn)，但與內(nèi)聯(lián)不同的是，這種情況下我們可以設置寬度和高度。 max-width保證了圖片能夠隨著容器的進行等寬擴充（即保證所有圖片最大顯示為其自身的 100%。此時，如果包含圖片的元素比圖片固有寬度小，圖片會縮放占滿最大可用空間），而height為auto可以保證圖片進行等比縮放而不至于失真。如果是背景圖片的話要靈活運用background-size屬性。width：100%呢？因為這條規(guī)則會導致它顯示得跟它的容器一樣寬。在容器比圖片寬得多的情況下，圖片會被無謂地拉伸。<img srcset="photo_w350.jpg 1x, photo_w640.jpg 2x" src="photo_w350.jpg" alt=""> 關于srcset可參考：響應式圖片 - 學習 Web 開發(fā) | MDNsrcset，則默認加載src里面的圖片。srcset里面的那張2x的，還會再去加載src里面的那張，加載兩張圖片。順序是先把所有srcset里面的加載完了，再去加載src的。這個策略比較奇怪，它居然會加載兩張圖片，如果不寫src，則不會加載兩張，但是兼容性就沒那么好。這個可能是因為瀏覽器認為，既然有srcset就不用寫src了，如果寫了src，用戶可能是有用的。而使用picture就不會加載兩張.banner{ background-image: url(/static/large.jpg);}@media screen and (max-width: 767px){ background-image: url(/static/small.jpg);}<picture> <source srcset="banner_w1000.jpg" media="(min-width: 801px)"> <source srcset="banner_w800.jpg" media="(max-width: 800px)"> <img src="banner_w800.jpg" alt=""></picture><!-- picturefill.min.js 解決IE等瀏覽器不支持 <picture> 的問題 --><script type="text/javascript" src="js/vendor/picturefill.min.js"></script>picture必須要寫img標簽，否則無法顯示，對picture的操作最后都是在img上面，例如onload事件是在img標簽觸發(fā)的，picture和source是不會進行l(wèi)ayout的，它們的寬和高都是0。source，還可以對圖片格式做一些兼容處理：<picture> <source type="image/webp" srcset="banner.webp"> <img src="banner.jpg" alt=""></picture>px,媒體查詢+百分比，媒體查詢+rem+js,vm/vh,vm/vh +rem這幾種方式來實現(xiàn)。但每一種方式都是有缺點的，媒體查詢需要選取主流設備寬度尺寸作為斷點針對性寫額外的樣式進行適配，但這樣做會比較麻煩，只能在選取的幾個主流設備尺寸下呈現(xiàn)完美適配，另外用戶體驗也不友好，布局在響應斷點范圍內(nèi)的分辨率下維持不變，而在響應斷點切換的瞬間，布局帶來斷層式的切換變化，如同卡帶的唱機般“咔咔咔”地一下又一下。通過百分比來適配首先是計算麻煩，第二各個屬性中如果使用百分比，其相對的元素的屬性并不是唯一的，這樣就造成我們使用百分比單位容易使布局問題變得復雜。通過采用rem單位的動態(tài)計算的彈性布局，則是需要在頭部內(nèi)嵌一段腳本來進行監(jiān)聽分辨率的變化來動態(tài)改變根元素字體大小，使得CSS與JS 耦合了在一起。通過利用純css視口單位實現(xiàn)適配的頁面，是既能解決響應式斷層問題，又能解決腳本依賴的問題的，但是兼容性還沒有完全能結構接受。rem來做字體的適配，用srcset來做圖片的響應式，寬度可以用rem，flex，柵格系統(tǒng)等來實現(xiàn)響應式，然后可能還需要利用媒體查詢來作為響應式布局的基礎，因此綜合上面的實現(xiàn)方案，項目中實現(xiàn)響應式布局需要注意下面幾點：關鍵詞：布局,原理,方案,響應,系列
微信公眾號
版權所有? 億企邦 1997-2025 保留一切法律許可權利。
