移動端和pc端,響應式設計布局


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

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

2.響應式的作用:設計最好的用戶體驗 

友好的用戶體驗是網頁可以在任何設備上展示和操作,設備包括桌面系統設備,平板電腦,iPhone等手機等。

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

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

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

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

@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)寬度使用百分比,盡量少使用絕對值寬度。

由於網頁會根據屏幕寬度調整布局,所以不能使用絕對寬度的布局,也不能使用具有絕對寬度的元素。這一條非常重要。

例如:

不能使用一下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: 最大縮放比例

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM