網頁響應式設計原理

時間 2019-12-09

標籤網頁響應設計原理欄目 HTML 简体版

原文原文鏈接

現現在，隨着社會發展，PC端的使用相比較於移動端的使用量顯劣勢。一些頁面的使用也就須要從新設計。css

網頁的響應式開發需求也愈來愈大。html

1.viewport屬性字體

　　　　<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>Document</title>
</head>
<body>

</body>
</html>spa

　　　　2.不使用絕對的寬度scala

　　　　　　　　也就是說平時咱們使用的像素：設計

.containerhtm

{ip

width：100px;開發

}rem

　　就須要寫成百分比的形式：width：20%；

　　　　3.使用相對文字大小

字體也不能使用絕對大小（px）,而只能使用絕對大小（rem）。

　　rem相對大小是相對於根元素的（html），好比html設置大小是10px 則1rem=10px，好比html是16px則1rem=16px.

　　在默認狀況下，根元素（html）大小是16px,所以默認狀況下1rem=16px;

　　也就是說 1rem = 10px 1.2rem=12px; 1.6rem=16px;若是想1rem=10px，則須要把html的根元素設置爲10px.

例如：

html{

　　　　font-size:62.5%; //把字體大小設置爲10px;10px =16px*62.5%;

}

1rem = 10px;

　　　　　　3.媒體查詢標籤

<link rel="stylesheet" type="text/css" media="screen and (max-width:400px) href="tinyScreen.css"/>

相關文章

相關標籤/搜索

響應式網頁設計

響應式表單

響應式佈局

網站建設指南

網站品質教程

網站主機教程

每日一句

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

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<