移動端響應式

時間 2019-12-09

標籤移動響應欄目無線简体版

原文原文鏈接

1、css3的@media媒體查詢css

一、定義和使用html

@media 能夠針對不一樣的屏幕尺寸設置不一樣的樣式，特別是若是你須要開發響應式的頁面，@media 是很是有用的。當你重置瀏覽器大小的過程當中，頁面也會根據瀏覽器的寬度和高度從新渲染頁面，這對調試來講是一個極大的便利。html5

語法：python

　　@media mediaType and|not|only (media feature) {
　　　　/*CSS-Code;*/
　　}

參數解釋：css3

　　　　mediaType（媒體類型）：類型有不少，經常使用screen，用於電腦屏幕，平板電腦，智能手機等；chrome

　　　　media feature：經常使用以下兩種值：瀏覽器

　　　　　　max-width：定義輸出設備中的頁面最大可見區域寬度；iphone

　　　　　　min-width：定義輸出設備中的頁面最小可見區域寬度；函數

二、開始編寫響應式頁面佈局

a、準備工做一：設置Meta標籤

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

參數解釋：

　　　　　　width=device-width：寬度等於當前設備的寬度；

　　　　　　initial-scale=1.0：初始的縮放比例（默認設置爲1.0）

　　　　　　user-scalable=no：用戶是否能夠手動縮放（設置爲no，咱們不但願用戶放大縮小頁面）；

b、準備工做二：加載兼容文件JS，由於IE8不支持HTML5和CSS3 的@media，因此須要加載兩個JS文件，來保證咱們的代碼實現兼容效果

　　<!--[if lt IE 9]>
　　   <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
　　　　<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
　　<![endif]-->

c、準備工做三：設置IE渲染方式默認爲最高(可選)，如今有不少人的IE瀏覽器都升級到IE9以上了，因此這個時候就有又不少詭異的事情發生了，例如如今是IE9的瀏覽器，可是瀏覽器的文檔模式倒是IE8，爲了防止這種狀況，咱們須要下面這段代碼來讓IE的文檔渲染模式永遠都是最新的　　

    <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">

　　　　PS：這段代碼後面加了一個chrome=1，若是用戶的電腦裏安裝了chrome，就可讓電腦裏面的IE不論是哪一個版本的均可以使用Webkit引擎及V8引擎進行排版及運算，若是沒有安裝，就顯示IE最新的渲染模式。

d、代碼示例：

　　<!DOCTYPE html>
　　<html>
　　<head>
　　　　<meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
       <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
       <title>響應式頁面</title>
       <!--[if lt IE 9]>
　　　　　　<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
　　       <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
       <![endif]-->

　　　　<style>
       　　@media screen and (min-width: 1200px){
　　　　　　　　body{
　　　　　　　　　　background-color: red; // 屏幕寬度大於等於1200px時生效
                 }
              }

          　　// 屏幕寬度大於等於800px，小於等於1200px時生效
　　　　　　@media screen and (min-width: 800px) and (max-width: 1200px){
　　　　　　　　body{
　　　　　　　　　　background-color: green; 
　　　　　　　　　　}
　　　　　　　　}

　　　　　　@media screen and (max-width: 800px) {
　　　　　　　　body{
　　　　　　　　　　background-color: yellow;  // 屏幕寬度小於等於800px時生效
                 }
              }
　　　　</style>
　　</head>
　　<body>

　　</body>
　　</html>

2、移動端單位介紹

CSS中，W3C文檔把尺寸單位劃爲爲兩類：相對長度單位和絕對長度單位。

相對長度單位按照不一樣的參考元素，又能夠分爲字體相對單位和視窗相對單位：

字體相對單位有：em、ex、ch、rem；

視窗相對單位則包含：vw、vh、vmin、vmax幾種；

絕對單位則是固定尺寸，它們採用的是物理度量單位：cm、mm、in、px、pt以及pc。但在實際應用中，咱們使用最普遍的則是px、百分比（%）、em以及rem來度量頁面元素的尺寸。

px：絕對（固定）單位；

缺點：任何狀況下都是固定值，會致使佈局在不一樣尺寸下的設備錯位；

%：相對單位（會有影響發生變化）相對於父級（自身）大小進行定位；

缺點：能肯定範圍的仍是比較好計算的，對於不太好肯定值得地方很差使用百分比，而且會致使變形，高度通常很差控制；

em：相對單位（會有影響發生變化） em=當前字體大小；

缺點：會根據當前容器字體大小發生變化，假如每一個容器字體大小不一致，那麼計算會很是麻煩；

rem：(r = root)相對單位，只依賴html字體大小；

優勢：響應式佈局中應用；

示例：動態的修改根元素font-size的js代碼：

/* 自執行函數
　　 * 得到頁面寬度後動態修改html上的fontsize
　　 * 320爲iphone5設計稿下的頁面寬度，以下設置後的頁面在iphone5等寬屏幕上
　　 * html的font-size會變爲100px，即 1rem = 100px    1px=0.01rem
　　 * 因此設置元素尺寸的時候，若是測量設計稿 15px  則需設置尺寸爲 (0.01*15)rem = 0.15rem   
　　 */

　　!(function(doc, win) {
　　　　var docEle = doc.documentElement;
　　　　evt = "onorientationchange" in window ? "orientationchange" : "resize";
　　　　fn = function() {
　　　　　　var width = docEle.clientWidth;
　　　　　　console.log(width)
　　　　　　width && (docEle.style.fontSize = 100 * (width / 320) + "px");
　　　　};
     
　　　　win.addEventListener(evt, fn, false);
　　　　doc.addEventListener("DOMContentLoaded", fn, false);
 
　　}(document, window));