|
導讀網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立... 網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。 相信大家對px已經很熟悉了,但是提到rem有些人就不知道了。今天這篇文章主要介紹什么是rem,em,以及他們在移動端中的布局方法,有需要的可以參考一下,希望對你有幫助。一、rem是什么? rem是css3中新增加的一個單位屬性(font size of the root element),根據頁面的根節點的字體大小進行轉變的單位。root!。。。。。。!根節點,也就是html。 例:(下面例子中的根節點是html ,它的字體大小是100px,所以根節點下面的元素所設置的rem,都是1rem=100px。) <html>
<head>
<style>
html,body{ font-size: 100px; }
header{ height: 1rem;width: 1rem; }
</style>
</head>
<body></body>
<header></header>
</html>二、em是什么 em也是一個相對單位,em單位是根據父元素的字體大小來進行轉變的單位。 父節點 <header style="font-size:100px;">//父元素的字體大小是100px
<div style="height:1em;width:1em;"></div>//所以子元素的em是1em=100px;
</header>三、移動端頁面開發技巧: 先調查用戶的使用情況,總結出大部分用戶使用的都是什么設備。 將他們都羅列出來,然后去寫媒體查詢(因為不同手機分辨率不同,所以用像素的話,會出現顯示的相同,舉個栗子~ 比如說小朋友吃飯,食堂給小朋友的標配是一個饅頭,可是有的小朋友飯量大,有的飯量小,所以會出現不夠吃或者吃不了造成浪費。怎么避免這種情況呢,所以食堂大媽想了一個主意體重在50斤~60斤的小盆友可以領取到一個饅頭,低于50斤的半個饅頭,體重大于60斤的,兩個饅頭,這三種分配方式。) 我的用戶群體大概是這三種設備 先取出一個中間的設備來做基本樣式的書寫 在頁面中優先寫出媒體查詢的標簽 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> width - viewport設備的寬度 上面分配好了,按照這種方式寫媒體查詢 html,body{ height: 100%; margin: 0; padding: 0; font-size: 14px;}//注意初始樣式必須寫在最頂部。。。∪绻麑懺诿襟w查詢底部的話就會覆蓋上方的媒體查詢(因為是層疊樣式表嘛~) @media screen and (max-width:320px ) {
html{font-size: 12px;}
}
@media screen and (min-width:321px) and (max-width:750px ) {
html{font-size: 14px;}
}
@media screen and (min-width:751px ) {
html{font-size: 16px;}
}因為上面寫好了一套初始模版,因為初始模版都是px的,在文章的開端我們就強調了為什么不能用px了,所以我們要將頁面中的px轉換成相應的rem值 例: header{
width:140px;//轉化為10rem,因為我們是基于最中間的設備做的,中間設備的font-size:14px,所以140px=10rem。
}所有用px的高寬全部改成rem這樣就完成了,對三種設備的適配。 以上就是深入理解CSS中的rem以及移動端的布局方法的詳細內容,更多請關注php中文網其它相關文章! 網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。 |
溫馨提示:喜歡本站的話,請收藏一下本站!