行動端-響應式、rem/em、利用Js動態實現行動端自適應

隨著3G的普及，越來越多的人使用手機上網。行動裝置正超過桌面設備，成為存取網路最常見的終端。於是，網頁設計師必須面對一個難題：如何在不同大小的裝置上呈現同樣的網頁？ 本篇文章將講述自適應網頁設計的概念和方法，使網頁開發人員維護同一個網頁程式碼，即可使網站在多種裝置上具有更好的閱讀體驗。本文詳細介紹了自適應網頁的實作方法，希望能為迷惑的你帶來幫助。

　　一. 在HTML的頭部加入meta標籤

　　　　在HTML的頭部，也就是head標籤中增加meta標籤，告訴瀏覽器網頁寬度等於設備螢幕寬度，且不進行縮放，程式碼如下：

 

 　　　　簡單分析一下這一行程式碼的意思：width=device-width表示網頁的寬度等於裝置螢幕的寬度，initial-scale=1.0表示設定頁面初始的縮放比例為1，user-scalable=no表示禁止使用者進行縮放，maximum-scale=1.0 和minimum-scale=1.0 表示設定最大的和最小的頁面縮放比例。因為各大瀏覽器對meta標籤的解析程度不一樣，所以我們要盡可能的去與所有瀏覽器相容。

 

　　二. 百分比佈局

　　　　在頁面佈局中，相對寬度和絕對寬度相結合來進行佈局，將更有利於網頁的可維護性。

　　　　下圖分別是拉勾網在iPhone5、iPhone6和iPhone 6 Plus下的佈局，可以看到隨著設備的螢幕寬度不同，即使是同一套網頁程式碼顯示出來的字體大小以及間隔也都不一樣。紅線框內部分就是使用了百分比佈局的做法，對於網頁的可維護性將會更好。

             

 

　　三.  響應式頁面的實作

　　　　目前一般常見的實作響應式有兩種方法，一種是利用媒體查詢，另一種是bootstrap下的柵格佈局，以後介紹bootstrap的時候來介紹柵格佈局，這裡主要來說一下如何利用媒體查詢實現響應式佈局。

　　　　媒體查詢，即 @media 查詢，媒體查詢可以針對不同的螢幕尺寸設定不同的樣式，特別是如果你需要設計響應式的頁面，@media 是非常有用的。當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。因為是設定樣式，所以將媒體查詢相關的程式碼放在css檔案的最下方即可。

　　　　為了更清楚地理解響應式的用法，我在下方列舉了兩個案例。第一個案例比較簡單，實現了在不同的頁面寬度中改變body的背景顏色的作用。第二個案例以具體的項目來舉例，更方便使用者

實例1：

#如果頁面寬度小於300 像素,則修改body的背景顏色為紅色:

@media screen and (max-width: 300px) {
    body {
         background-color:red;
    }
}

 如果頁面寬度大於300 像素且小於600像素，則修改body的背景顏色為綠色:

@media screen and (min-width: 300px) and (max-width:600px) {
    body {
         background-color:green;
    }
}

如果页面宽度大于 600 像素，则修改body的背景颜色为蓝色:

@media screen and (min-width: 600px) {
    body {
         background-color:blue;
    }
}

 

代码解释：

　　screen 表示电脑屏幕，平板电脑，智能手机等，min-width和max-width 用于定义设备中页面的最小和最大宽度。

实例2：视觉中国首页的响应式实现

　　首先来看该页面在不同窗口中的展示效果：

　　在窗口宽度大于1200px时候的页面样式如下：

 

　　在窗口宽度大于900px并且小于1200px时候页面样式如下：

 

当页面宽度小于900px时候页面样式如下：

 

接下来我们来看具体的代码实现：

　　html代码如下：注意有几张图片则写几个col

<p class="group_wrap">
    <p class="group">
        <p class="col">
            <p class="img_logo">
                <img src="img/8.jpg" alt="">
            </p>
        </p>
        <p class="col">
            <p class="img_logo">
                <img src="img/9.jpg" alt="">
            </p>
        </p>
    </p>
</p>

 

css代码如下，默认是页面宽度大于1200px时候的页面：

.group_wrap{
    width: 100%;
    overflow: hidden;
}
.group{
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;
}
.col{
    width: 280px;
    margin: 10px;
    float: left;
}
.img_logo{
    padding: 10px;
    background: white;
}

 实现响应式代码如下，放在css文件的最下方即可：

/*当页面的宽度在900px ~ 1200px之间的时候*/
@media screen and (min-width: 900px) and (max-width: 1200px){
    .group{
        width: 900px;
    }
}
/*当页面的宽度在600px ~ 900px之间的时候*/
@media screen and (min-width:600px) and (max-width: 900px){
    .group{
        width: 600px;
    }
}

 

总结：实际上响应式页面的实现非常简单，只要认真学，经常练，一定可以熟练掌握的！

 

　　

四. 页面使用相对字体

　　在我们平常的网页布局过程中经常使用绝对单位像素(px)来进行布局，这样的布局不适合我们自适应网页的实现，所以我们现在来介绍两种常见的绝对单位em和rem。rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

　　1. 相对长度单位em

　　　　　　em的特点 : ① em的值并不是固定的; ② em始终会继承父级元素的字体大小。

　　　　　　废话不多说，直接上代码：

html代码：

<p class="one">
    <span>第一层</span>
    <p class="two">
        <span>第二层</span>
        <p class="three">
            <span>第三层</span>
        </p>
    </p>
</p>

 

css代码：

以上是行動端-響應式、rem/em、利用Js動態實現行動端自適應的詳細內容。更多資訊請關注PHP中文網其他相關文章！