简单响应式布局展示
1.什么是響應(yīng)式網(wǎng)頁？
??一個(gè)頁面，可以根據(jù)瀏覽設(shè)備的不同，以及特性的不同，而自動(dòng)改變布局、大小等。
??優(yōu)點(diǎn)：可以自動(dòng)適配PC、PAD、PHONE瀏覽器屏幕
??不足：代碼變復(fù)雜，需要考慮更多兼容性，并不適合內(nèi)容非常多網(wǎng)頁
?
5.css文件
1 body { 2 margin: 0; 3 background: #fff; 4 font-family: 'SimHei'; 5 } 6 7 /*只在PC屏幕下執(zhí)行的樣式*/ 8 @media screen and (min-width: 992px) { 9 .box { 10 margin: 20px; 11 padding: 20px; 12 background: #fee; 13 color: #a00; 14 } 15 } 16 /*只在PAD屏幕下執(zhí)行的樣式*/ 17 @media screen and (min-width: 768px) and (max-width: 991px) { 18 .box { 19 margin: 10px; 20 padding: 10px; 21 background: #efe; 22 color: #0a0; 23 } 24 .box h1 { 25 display: none; 26 } 27 } 28 /*只在PHONE屏幕下執(zhí)行的樣式*/ 29 @media screen and (max-width: 767px) { 30 .box { 31 margin: 0px; 32 padding: 0px; 33 background: #eef; 34 color: #00a; 35 } 36 } 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <link rel="stylesheet" href="css/5.css"/> 6 <title></title> 7 </head> 8 <body> 9 <div class="box"> 10 <h1>使用媒體查詢技術(shù)</h1> 11 <h1>根據(jù)屏幕不同的寬度執(zhí)行不同的CSS文件</h1> 12 <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur officia quasi qui reprehenderit tempore veniam voluptas? Asperiores, culpa dolor dolorum impedit ipsam magnam minima nostrum quibusdam quod reprehenderit rerum, voluptate?</span><span>Accusantium ad atque dicta dolor est et expedita facere fuga illum iusto, labore laboriosam laudantium molestiae nam, nemo, neque nobis nostrum possimus provident quam quis quod recusandae repellendus sapiente veniam.</span><span>Architecto, assumenda at, blanditiis consectetur consequuntur deserunt dolore earum eos eum, ex fugit id laudantium magni necessitatibus nemo nihil nostrum praesentium provident recusandae repellendus similique sit ullam vel voluptatem voluptatibus.</span> 13 </p> 14 </div> 15 </body> 16 </html>轉(zhuǎn)載于:https://www.cnblogs.com/samdx/p/6119641.html
總結(jié)
- 上一篇： 11/28 前端码农日报
- 下一篇： 2017年html5行业报告,云适配发布