移動端和pc端，響應式設計佈局

時間 2019-11-11

標籤移動響應設計佈局欄目無線简体版

原文原文鏈接

1.什麼是響應式 Web 設計?

響應式 Web 設計讓你的網頁能在全部設備上有好顯示。
響應式 Web 設計只使用 HTML 和 CSS。
響應式 Web 設計不是一個程序或Javascript腳本。

2.響應式的做用：設計最好的用戶體驗

友好的用戶體驗是網頁能夠在任何設備上展現和操做，設備包括桌面系統設備，平板電腦，iPhone等手機等。javascript

網頁應該根據設備的大小自動調整內容。css

頁面的設計與開發根據用戶行爲以及設備環境(系統平臺、屏幕尺寸、屏幕定向等)進行相應的響應和調整稱之爲響應式 Web 設計。html

3.自適應設計或者響應式設計的方法

（1）使用@media，條件（min-width: 768px）判斷當瀏覽器的寬度小於768px值時，改變樣式。java

@media (min-width: 768px) {
  .main {
    width: 25%;
    float: left;        
  }
}

經過媒體查詢選擇性加載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文件。佈局

（2）寬度使用百分比，儘可能少使用絕對值寬度。測試

因爲網頁會根據屏幕寬度調整佈局，因此不能使用絕對寬度的佈局，也不能使用具備絕對寬度的元素。這一條很是重要。字體

例如：ui

不能使用一下css代碼：

div{width：xxx px}

在響應式中，應該這麼使用：

div{
    width:100%;
    //或者
    width:auto;
}

（3）字體的設置相對大小

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

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

移動端設置字體大小：

在移動端上，設置字體爲24px，則24/16=1.5，p的大小是默認大小的1.5倍，即24像素（24/16=1.5）。

p{font-size: 1.5em}

（4）流動佈局（fluid grid）

「流動佈局」的含義是，各個區塊的位置都是浮動的，不是固定不變的。

.leftDiv{
    float: left;
    width: 70%;
}
.rightDiv {
    float: right;
    width: 25%;
}

4.具體理解

在網頁上，寫一個普通的網頁效果

<!DOCTYPE html>
<html>
<head>
	<title>測試</title>
	<meta charset="utf-8">
	<!-- <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>

模擬手機上看到的樣式，字體很小，看不清，是由於按照電腦上的像素對字體進行設置的，分辨率不同。

加上代碼後的樣式：

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

viewport: 通常指的是瀏覽器窗口內容區的大小，不包含工具條、選項卡等內容
width: 瀏覽器寬度，輸出設備中的頁面可見區域寬度
device-width: 設備分辨率寬度，輸出設備的屏幕可見寬度
initial-scale: 初始縮放比例
maximum-scale: 最大縮放比例

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。