html+css实现响应式布局入门
什么是響應(yīng)式布局
響應(yīng)式布局是Ethan Marcotte在2010年5月份提出的一個(gè)概念，簡(jiǎn)而言之，就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本。這個(gè)概念是為解決移動(dòng)互聯(lián)網(wǎng)瀏覽而誕生的。響應(yīng)式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗(yàn)，而且隨著大屏幕移動(dòng)設(shè)備的普及，用“大勢(shì)所趨”來(lái)形容也不為過(guò)。隨著越來(lái)越多的設(shè)計(jì)師采用這個(gè)技術(shù)，我們不僅看到很多的創(chuàng)新，還看到了一些成形的模式。
-------來(lái)自百度百科
媒體查詢
@media not|only mediatype and (expressions) {} 不過(guò)我喜歡用 @meadia screen and（expressions）{}not :表示 not是用來(lái)排除掉某些特定的設(shè)備的 例如 @media not xxx
only:用來(lái)定某種特別的媒體類型。對(duì)于支持Media Queries的移動(dòng)設(shè)備來(lái)說(shuō)，如果存在only關(guān)鍵字， 移動(dòng)設(shè)備的Web瀏覽器會(huì)忽略only關(guān)鍵字并直接根據(jù)后面的表達(dá)式應(yīng)用樣式文件。對(duì)于不支持Media Queries的設(shè)備但能夠讀取 Media Type類型的Web瀏覽器，遇到only關(guān)鍵字時(shí)會(huì)忽略這個(gè)樣式文件。
| all | 用于所有多媒體類型設(shè)備 |
| 用于打印機(jī) | |
| screen | 用于電腦屏幕，平板，智能手機(jī)等 |
| speech | 用于屏幕閱讀器 |
簡(jiǎn)單的案例
html <!DOCTYPE html> <html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimal-ui:ios"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="style.css"><script src=""></script> </head><body><div id="a"><h1>aaaaa</h1></div><div id="b"><h1>bbbbb</h1></div><div id="c"><h1>ccccc</h1></div><div id="d"><h1>ddddd</h1></div></body></html> css body{font-family: Arial, Helvetica, sans-serif;background-color: gray;color: white;text-align: center;padding-top:100px;/* transition: display 2s; */}h1{display: none;}/* 媒體查詢 */@media (max-width: 500px){body{background-color: rebeccapurple;}#d h1{display: block;}}@media (min-width: 501px) and (max-width: 756px){body{background-color:red;}#c h1{display: block;}}@media (min-width: 757px) and (max-width: 998px){body{background-color:blue;}#b h1{display: block;}}@media (min-width: 999px) and (max-width: 1199px){body{background-color:darkgreen;}#a h1{display: block;}} 效果
講講em和rem
em 和 rem 都是描述字體大小的，首先em和rem都是相對(duì)長(zhǎng)度單位。em是相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸。說(shuō)人話就是em繼承父級(jí)標(biāo)簽的大小，例如0.1em字體大小就是父級(jí)標(biāo)簽字體大小的0.1倍，而rem是css3新增的相對(duì)單位，rem相對(duì)的是html根標(biāo)簽字體的大小，例如chrome默認(rèn)的html標(biāo)簽字體大小是16px ，那對(duì)應(yīng)的1rem就是16px。在響應(yīng)式布局中rem是比較好用的。
總結(jié)
以上是生活随笔為你收集整理的html+css实现响应式布局入门的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： JQuery Datatables 实现
- 下一篇： 前端插件——Bootstrap Dual