pc端和移動端的響應式，以及自適應的區別，兩者的適用范圍

本文轉載自查看原文 2020-05-03 18:38 1137

1.響應式跟自適應有什么區別?

　　響應式網站：https://www.microsoft.com/zh-cn/

　　自適應網站：http://m.ctrip.com/html5/

自適應是最早出現的，后面才有了響應式。

1. 響應式布局是流動網格布局（各個區塊的位置都是浮動的，不是固定不變的）。用不同設備（電腦、平板、手機）去訪問此頁面，最后看到的布局和內容是有很大不同。

2. 自適應布局是使用固定分割點來進行布局。不管訪問設備如何的不同（下圖是三台尺寸不一樣的手機），最后看到的頁面內容和布局基本上還是一樣的，就是尺寸略有不同。

2.實現響應式有哪幾種方式?

2.1.使用媒體查詢(Media Query) 結合 rem字體

記住,先在<head>標簽里加入這個meta標簽(設置設備按照一比一的尺寸進行顯示，並且禁止用戶縮放頁面):

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

其次是媒體查詢，這個大家應該都知道，這個是響應式最重要的部分。

如果大於1000px，就用：

@media screen and (min-width:1000px){...}              對應PC端頁面

如果在小於1000px和大於768px之間：

@media screen and (max-width:1000px) and (min-width:768px) {...}        對應平板端頁面

如果小於768px：

@media screen and (max-width:768px){...}           對應手機端頁面

整合起來的話，就是：

@media screen and (min-width:1000px){
　　html,body{
　　　font-size:.8rem;
　　}
}  
    
@media screen and (max-width:1000px) and (min-width:768px){
　　html,body{
　　　font-size:.7rem;
　　}
}  

@media screen and (max-width:768px){
　　html,body{
　　　font-size:.6rem;
　　}
}

也可以通過媒體查詢選擇性加載css，意思是自動探測屏幕寬度，然后加載相應的CSS文件。

<link rel="stylesheet" type="text/css"
        media="screen and (max-device-width: 400px)"
        href="tinyScreen.css" />

以上代碼表示：如果屏幕寬度小於400像素（max-device-width: 400px），就加載tinyScreen.css文件。

link rel="stylesheet" type="text/css"
        media="screen and (min-width: 400px) and (max-device-width: 600px)"
        href="smallScreen.css" />

以上代碼表示：如果屏幕寬度在400像素到600像素之間，則加載smallScreen.css文件。

注意！使用響應式，寬度使用百分比，盡量少使用絕對值寬度。由於網頁會根據屏幕寬度調整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素。

// 不能使用一下css代碼：
div{width：50 px}

//在響應式中，應該這么使用：
div{
    width:100%;
    //或者
    width:auto;
}

字體的設置相對大小

移動端字體也不能使用絕對大小（px），而只能使用相對大小（em）或者高清方案（rem）,rem不局限於字體大小，前面的寬度width也可以使用，代替百分比

// 設置字體大小為默認大小，16像素
body{
    font: normal 100% Helvetica, Arial, sans-serif;
}

// 在移動端設置字體
p{font-size: 1.5em}

示例：

<!DOCTYPE html>
<html>
<head>
    <title>測試</title>
    <meta charset="utf-8">
    <!-- 注釋了meta標簽-->
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> -->
</head>
<style type="text/css">
    p{border: 1px solid black;}
</style>
<body>
<div>
    <p>響應式原理</p>
</div>
</body>
</html>

看結果：字體很小，看不清，是因為按照電腦上的像素對字體進行設置的，分辨率不一樣。