你的位置:首页 > 软件开发 > Java > rem计算适配

rem计算适配

发布时间:2016-10-06 10:00:09
git地址:https://github.com/wjf444128852/about-web-rem 建议在CSS引入之前引入下面这段JS代码,比例1rem:100px。用了这个JS就不用在CSS内写N多个@media screenXXX了。说明:在html内最外层元素给m ...

git地址:https://github.com/wjf444128852/about-web-rem

 建议在CSS引入之前引入下面这段JS代码,比例1rem:100px。

用了这个JS就不用在CSS内写N多个@media screenXXX了。

说明:

  • 在html内最外层元素给max-width:640px,min-width:320px
  • 元素宽高都以rem为单位就会自动缩放
  • 字体大小一般0.2rem-0.34rem,如>h3:font-size:0.3rem,h4:font-size:.28rem,p:font-size:.2rem一般这几个够用了.
  • 引入img标签时候该img必须float或者给一个属性(vertical-align: middle;display:block)否则其与父元素有20多px的margin-bottom
  • 如img想自适应需要给个宽度,宽度可以百分比,可以rem为单位给固定宽度,比如img实际宽度100px,用此JS后想自动缩放,可以css里给该img{width:1rem},其他元素雷同。
  • 如果有用到input时候,该input得浮动或者以rem为单位给固定宽度和高度,不然占据行高很大,出现元素占据位置大时候,float一下即可
  • 参考来源:戳此处

    原标题:rem计算适配

    关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录