淺談響應式佈局

時間 2019-11-17

標籤淺談響應佈局简体版

原文原文鏈接

響應式佈局應該包括如下幾點：css

一、CSS3.0媒介查詢；html

咱們所作的html文件都是在瀏覽器的解析下顯示的，在PC端，在手機瀏覽器中都是能夠的，惟一所不一樣的就是瀏覽器的視界窗口不一樣而已。在css3中使用媒體查詢，能夠在不改變頁面內容的狀況下，爲特定的一些輸出設備定製顯示效果。咱們所要作的就是在頁面中的<head>標籤之中加入<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> ；前端

固然咱們的css3媒介查詢是創建在支持css3的基礎上，支持CSS3的瀏覽器的狀況看下圖；css3

再看下css3.0媒介查詢的使用，經過在不一樣寬度的狀況下，使用不一樣的樣式，頁面自適應佈局；瀏覽器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, maximum-scale=1.0, initial-scale=1.0, user-scalable=0">
	<title>改變窗口大小有驚喜</title>
	<style type="text/css">
		body {
			background-color: grey;
		}
		@media screen and (max-width: 960px) {
			body {
				background-color: red;
			}
		}
		@media screen and (max-width: 768px) {
			body {
				background-color: orange;
			}
		}
		@media screen and (max-width: 550px) {
			body {
				background-color: yellow;
			}
		}
		@media screen and (max-width: 320px) {
			body {
				background-color: green;
			}
		}
	</style>
</head>
<body>
<p>改變窗口大小有驚喜喲！</p>
</body>
</html>

二、百分比對應絕對像素寬度；佈局

在響應式佈局中，咱們通常會使用max-width屬性來約束頁面的最大寬度，而後在此狀況下作百分比寬度；固然這個百分比的使用，遵循一個原則：目標元素寬度÷上下文元素寬度=百分比寬度，如咱們總的寬度在980px的狀況下再定位一個居中塊級寬度爲960px的元素，這時候用960/980 獲得即爲百分比的數值；字體

三、字體單位em對應以爲像素px；flex

字體的定值大小不能爲絕對像素px，要用相對像素單位em，具體計算方式請參閱這片博客，作一個引路人強大的em;spa

四、自適應圖片；.net

自適應圖片屬性：

img {
   border: 0;
   max-width: 圖片原本像素大小
   width: 百分比
}

固然圖片的大小要經過所處上下文的狀況的；

五、display屬性的靈活利用；

在移動前端佈局中，display屬性能夠簡化不少複雜的佈局，上一篇博客講到細說CSS中的display屬性，另外咱們還提供一種自適應佈局，display: flex；具體請參考flex屬性；

六、萬能的max-width；

max-width的使用其實很簡單,靈活使用可使咱們的頁面適應不那麼僵硬！

相關標籤/搜索

每日一句

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