html+css实现响应式布局入门
生活随笔
收集整理的這篇文章主要介紹了
html+css实现响应式布局入门
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
什么是響應式布局
響應式布局是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。這個概念是為解決移動互聯網瀏覽而誕生的。響應式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗，而且隨著大屏幕移動設備的普及，用“大勢所趨”來形容也不為過。隨著越來越多的設計師采用這個技術，我們不僅看到很多的創新，還看到了一些成形的模式。
-------來自百度百科
媒體查詢
@media not|only mediatype and (expressions) {} 不過我喜歡用 @meadia screen and（expressions）{}not :表示 not是用來排除掉某些特定的設備的 例如 @media not xxx
only:用來定某種特別的媒體類型。對于支持Media Queries的移動設備來說，如果存在only關鍵字， 移動設備的Web瀏覽器會忽略only關鍵字并直接根據后面的表達式應用樣式文件。對于不支持Media Queries的設備但能夠讀取 Media Type類型的Web瀏覽器，遇到only關鍵字時會忽略這個樣式文件。
| all | 用于所有多媒體類型設備 |
| 用于打印機 | |
| screen | 用于電腦屏幕，平板，智能手機等 |
| speech | 用于屏幕閱讀器 |
簡單的案例
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都是相對長度單位。em是相對于當前對象內文本的字體尺寸。說人話就是em繼承父級標簽的大小，例如0.1em字體大小就是父級標簽字體大小的0.1倍，而rem是css3新增的相對單位，rem相對的是html根標簽字體的大小，例如chrome默認的html標簽字體大小是16px ，那對應的1rem就是16px。在響應式布局中rem是比較好用的。
總結
以上是生活随笔為你收集整理的html+css实现响应式布局入门的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JQuery Datatables 实现
- 下一篇： 2017年html5行业报告,云适配发布