H5移动端rem布局还原750px设计稿方案。
生活随笔
收集整理的這篇文章主要介紹了
H5移动端rem布局还原750px设计稿方案。
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
引入對(duì)應(yīng)的腳本:
<!DOCTYPE html> <html> <head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><!--引入淘寶lib-flexible布局--><script src="./index.min.js"></script><!--引入淘寶lib-flexible布局--><!--設(shè)計(jì)稿給出750px的設(shè)計(jì)圖，然后對(duì)應(yīng)除去75就為樣式的rem， 比如設(shè)計(jì)稿的元素寬度是75px, 那么樣式直接寫(xiě)1rem就可以了--><link href="./h5.css" rel="stylesheet" /><title>H5淘寶移動(dòng)端布局方案</title> </head> <body><ul><header>header</header><div class="box"><div class="left">left</div><div class="right">right</div></div></ul> </body> </script></script> </html>css代碼：?
* {margin: 0;padding: 0; } /********設(shè)計(jì)稿給出750px的設(shè)計(jì)圖，然后對(duì)應(yīng)除去75就為樣式的rem， 比如設(shè)計(jì)稿的元素寬度是75px, 那么樣式直接寫(xiě)1rem就可以了***********/ header {width: 10rem;height: 1.5rem;background: red;font-size: 0.36rem; }.box {margin: 0 auto;width: 6.9466rem;height: 6.173rem;background-color: #515b66;background: blue;font-size: 36px; }.box .left {float: left;width: 3.2rem;height: 1rem;background: green; }.box .right {float: left;width: 4.3rem;height: 1rem;background: yellow; }設(shè)計(jì)稿給出750px的設(shè)計(jì)圖，然后對(duì)應(yīng)除去75就為樣式的rem， 比如設(shè)計(jì)稿的元素寬度是75px, 那么樣式直接寫(xiě)1rem就可以了
總結(jié)
以上是生活随笔為你收集整理的H5移动端rem布局还原750px设计稿方案。的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 18.自定义标签及模板中的使用【由浅入深
- 下一篇： 大数据社交-你的王道他的华容道