響應式網站怎麼搞？

時間 2019-11-11

原文原文鏈接

1.在頁面頭部加入以下的聲明：css

viewport = 視口（設備屏幕）
content = 內容
device-width = 設備寬度
initial-scale = 初始-比例
minimum-scale = 最小-比例
maximum-scale = 最大-比例
user-scalable=yes 容許用戶縮放網頁
media = 媒體
query = 查詢
<meta name="MobileOptimized" content="320" />（舊iphone）以320px寬度渲染頁面iphone

樣式：@media screen and (max-width: 500px) {body { background-color: black;}}//屏幕寬度不超過500px時，背景設置爲黑色。佈局

max-width,min-width：顯示區域的最大/小寬度，橫屏時會變化;max-device-width,min-device-width：手機的最大/小寬度，橫屏時不會變化;字體

動態加載樣式表:<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />//屏幕寬度不超過800px時，引用該樣式表。ui

2.字體縮放 em/remspa

em的特色:em的值並非固定的；em始終會繼承父級元素的字體大小。若是父級元素font-size:20px;子級font-size:2em;那麼子級的字號就是 2*20px=40px;繼承的最終標籤是body標籤。scala

em的問題：多層嵌套的佈局，每層的font-size都繼承其父級，字體會愈來愈小或愈來愈大。設計

rem特色：使用rem爲元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素（就是<html>標籤）。能夠避免字體大小逐層複合的連鎖反應，不至於層級越多字體越小/越大。htm

咱們想實現手機端自適應，就是能夠讓頁面的元素字體、間距、寬高等屬性的屬性值能夠隨着手機屏幕尺寸的變化而變化，

利用Js來動態的設置rem並實現移動端的自適應，Js代碼以下：

//獲取html元素
var html = document.getElementsByTagName('html')[0];
//屏幕的寬度（兼容處理）
var w = document.documentElement.clientWidth || document.body.clientWidth;
//750這個數字是根據你的設計圖的實際大小來的，因此值具體根據設計圖的大小
html.style.fontSize = w / 750 + "px";

以上代碼實現了利用Js獲取設備屏幕的寬度，並根據屏幕的寬度動態改變根元素html的font-siz屬性的做用。好比說，對於iphone6而言，屏幕尺寸爲750，那麼在iPhone6下html的font-size爲1px,因此1rem = 1px;對於iPhone5而言，屏幕尺寸爲640，那麼在iPhone5下html的font-size爲640/750 = 0.85333px，因此1rem = 0.85333px。這樣的話即便咱們對一個元素設置一樣的大小和單位，也會在不一樣的設備下顯示不一樣的大小。好比說div{width:100rem},在iPhone6下它的寬度將等於100px，而在iPhone5下它的寬度等於100 * 0.85333 = 85.333px。這樣咱們就真正實現了移動端的自適應！

http://www.cnblogs.com/gaohuijiao/p/6200538.html

http://www.cnblogs.com/vajoy/p/3730014.html

http://www.cnblogs.com/vajoy/p/3903591.html