如何讓網頁更機智地，適配不同的尺寸 - css進階

體查詢

響應式網頁是這幾年很流行的網頁風格之一，他能夠以一套網頁代碼，面對不同的條件，例如改變瀏覽器的寬度，手機橫豎屏，作出不同的樣式調整。

一套代碼走天下

最出名的響應式框架是Bootstrap，來自Twitter。也是每個剛入門前端開發師必學的框架，利用這個框架可以很輕松實現響應式效果。

面對不同的瀏覽器寬度，作出界面調整

要實現響應式，關鍵在于使用媒體查詢 Media！

語法

@media （媒體特性）and （媒體特性） {你的樣式}

看起來好像很復雜，先看完整的代碼

@media  (max-width:480px){ 
    body{background-color:green}
 }

上面這句話的意思，瀏覽器的寬度小于或等于480px時，背景顏色是綠色。

再來多一個，如下

@media  (min-width:481px){ 
    body{background-color:red}
}

上面這句話的意思，瀏覽器的寬度大于或等于481px時，背景顏色是紅色。

媒體特性

媒體特性就是依據什么樣的條件來進行更改樣式，是根據屏幕寬度大小、還是橫豎屏呢。這些條件都是官方定的，非常多。但實際上，真正有用的就是 min-width和max-width，根據瀏覽器寬度來設定不同的樣式。

這里會很容易混淆min-width和max-width的意義。min-width表示大于等于，max-width表示小于等于。

@media (max-width: 500px) {
    /** 窗口寬度小于等于500像素的樣式 **/
}

@media (min-width: 800px) {
    /** 窗口寬度大于等于800像素的樣式 **/
}

當有多個媒體特性時，用and連接，就可以形成一個區間范圍

@media (min-width: 600px) and (max-width: 700px) {
    /** 窗口寬度在600-700像素的樣式 **/
}

這就是他最基本的用法，凡是有兩面性，下面來說說他的優缺點。

優點

（1）面對不同分辨率設備靈活性強

（2）能夠快捷解決多設備顯示適應問題

缺點

（1）兼容各種設備工作量大，效率低下

（2）代碼累贅，會出現隱藏無用的元素，加載時間加長

案例

全局布局

下面這種響應式布局最為常見，通過媒體查詢定義不同的樣式，讓其能夠適應手機瀏覽器和桌面瀏覽器：

1、電腦端大屏幕下，網頁元素全部展示

電腦端樣式

2、手機端下，因為屏幕有限，只能讓主體內容呈現出來，其余部分隱藏起來，并且讓字體縮小。

手機端樣式

柵格布局

一提起響應式，絕對離不開強大的柵格布局，根據瀏覽器的寬度，設置容器不同的列寬。

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8"></div>
  <div class="col-xs-12 col-sm-6 col-md-8"></div>
</div>

只需要按照填寫bootstrap參數，即可匹配不同的寬度

柵格布局的原理其實也是利用了媒體查詢，這樣你就可以自定義一份自己的柵格布局。

部分源代碼

總結

1. 基本要求

前端界面顯示的速度一般要求是：60fps

2. 根據要求 1s / 60=16.67ms 即：處理一個界面的時間，除了瀏覽器自己需要的時間，開發者能使用的時間大概10ms

10ms中處理的流程為：

javascript > style > layout > paint > composite

如果JS的操作影響到了界面樣式的變化，則有上面的處理流程

如果style的操作影響到布局，則會進入layout，反之亦然；style改了transform屬性，在blink和edge瀏覽器里面不需要layout和paint

3. 減少渲染堵塞

避免head標簽JS堵塞

異步加載JS: HTML5 的script 屬性 defer

JS寫在body后面

Tips: 可能有時候JS庫，還沒加載完就要執行了，可能會報錯

減少 head 中的 CSS 資源

CSS 會影響到 layout ，寫在Body里面會界面閃爍，但寫在Head里面如果太多會影響渲染

不要寫太多base64，雖然很方便，但會改變文件大小

如果CSS文件沒有達到三位數的大小，可以直接寫到Html界面中，因為如果使用外鏈樣式，則可能會花費更多時間，如DNS解析，建立鏈接，下載等

優化圖片，使用響應式圖片，圖片的srcset 屬性，會有兼容問題

使用picture按需加載，需要寫在HTML中，如果使用JS來調用，則無效

<source srcset='baner_w1000.jpg' media="(min-width:801px)"> # source 還有其它的優化屬性，不過會有兼容問題: type='image/webp'

<img src='baner_w800.jpg' alt=''> # picture 必需有 img 標簽，只有img標簽才會觸發onload事件; picture 與 source 都不觸發 layout

</picture>

判斷瀏覽器是否支持：

var supportSrcset='srcset' in document.createElement('img');

var surportPicture='HTMLPictureElement' in window;

延遲加載

<img data-src="photo_w350.jpg" src="about:blank" alt=""> # src 寫為此值不會報錯，也對瀏覽器友好

</picture>

監聽Scroll事件

showImage(leftSpace=500){

var scrollTop=$window.scrollTop(), $containers=this.$imgContainers, scrollPosition=$window.scrollTop() + $window.height();

for(var i=0; i < $containers.length; i++){

//如果快要滑到圖片的位置了

var $container=$containers.eq(i);

if($container.offset().top - scrollPosition < leftSpace) {

this.ensureImgSrc($container);

}

ensureImgSrc($container) {

var $source=$container.find("source");

if($source.length && !$source.attr("srcset")){

$source.attr("srcset", $source.data("srcset"));

}

var $img=$container.find("img:not(.loading)");

if($img.length && $img.attr("src").indexOf("http://") < 0){

$img.attr("src", $img.data("src"));

this.shownCount++;

}

init(){

//初始化

var leftSpace=0;

this.showImage(leftSpace);

//滑動

$window.on("scroll", this, this.throttleShow);

}

ensureImgSrc($container){

//如果全部顯示，off掉window.scroll

if(this.shownCount >=this.allCount){

$window.off("scroll", this.throttleShow);

}

指定圖片尺寸，避免 reflow

4. 壓縮與緩存

作用

第一個是把200變成304，避免資源重新傳輸，

第二個是讓瀏覽器直接從緩存取，連http請求都不用了，這樣對于第二次訪問頁面是極為有利的。

開啟壓縮 gzip

server {

gzip on;

gzip_types text/plain application/javascript application/x-javascript text/html text/css text/xml text/javascript

}

緩存 Cache-Control

location ~* \.(jpg|gif|png|webp) {

expires 30d;

}

location ~* \.(css|js) {

expires 1d;

}

此方法會在返回的請求響應頭中添加 Cache-Control: max-age=604800 ，且 max-age 的優先級會大于 last-modified

開啟 nginx last-modified 字段，在響應頭中： last-modified 字段接收nginx的數據，在請求頭中： If-Modified-Since 字段返回給nginx

這個辦法得查手冊

使用etag，在響應頭中是： Etag 字段，在請求頭中會記錄在 If-None-Match 字段

server {

etag on;

}

5. 其它優化

DNS預讀取

HTML優化

刪除注釋、縮進，除了 pre 或 code 這樣的標簽不能刪除，其它的都可以

代碼優化

例如說html別嵌套太多層，否則加重頁面layout的壓力

CSS的選擇器別寫太復雜，不然匹配的計算量會比較大

JS的濫用閉包，閉包會加深作用域鏈，加長變量查找的時間

6. 利用HTML5或CSS3

代替圖片或 LocalStorage、 Offline Storage

創前端二牛

雖然執行環境的類型總共只有兩種——全局和局部（函數），但還是有辦法來延長作用域鏈的，這么說是因為有些語句可以在作用域鏈的前端臨時增加一個變量對象，該變量對象會在代碼執行后被移除。在兩種情況下會發生這種現象。具體來說，就是當執行流進入下列任何語句時，作用域鏈就會得到加長：

try-catch語句的catch塊。
with語句。

這兩個語句都會在作用域鏈的前端添加一個變量對象。對 with語句來說，會將指定的對象添加到作用域鏈中。對 catch語句來說，會創建一個新的變量對象，其中包含的是被拋出的錯誤對象的聲明。下面看一個例子：

var
mother
=
{
name
:
'Rose'
,
age
:
30
}
function
father
(){
var
fName
=
'Jack'
;
var
name
=
'張三'
;
function
son
(){
var
sName
=
'son'
;
with
(
mother
){
var
word
=
'my name: '
+
sName
+
', father name: '
+
fName
+
', mother name: '
+
name
+
", mother age: "
+
age
;
}
console
.
log
(
word
);
//my name: son, father name: Jack, mother name: Rose, mother age: 30
}
son
();
}
father
();

首先聲明一個對象 mother，包含兩個屬性： name和 age，然后定義一個函數 father，里面聲明兩個變量： fName和 name，又聲明一個函數 son， son中定義了一個變量 sName和一個 with語句塊。我們來看打印的結果， mother name為對象 mother中的 Rose，而不是函數 father中的張三，這就是 with語句在起作用。

在Chrome中調試可以發現，如下圖：

代碼執行到19行 with語句塊中時，作用域鏈的前端增加了一個 WithBlock作用域，根據作用域鏈搜索機制，此時的 name應該是 Rose。

再看下圖：

代碼執行到22行， with語句塊執行結束， with作用域從作用域鏈中移除， with語句塊中聲明的變量綁定在 with所在的函數中，所以 console.log(word)可以正常輸出 word。

在線咨詢

上一篇：歪果小姐姐教你用html代碼畫畫，這是真大佬！
下一篇：javaMail實現簡單的發送QQ郵箱

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商