资讯专栏INFORMATION COLUMN

rem布局

shaonbean / 1131人阅读

摘要:说一下的布局对应的是设定值这里的的设定值是唯一的参考物,该设定值。做响应式布局,弹性布局也好,这里要注意一下,要怎么处理这个。这里要看你具体需求引入淘宝的写动态去计算的的值通过最小值最大值设定值,控制屏幕范围去控制的值。

说一下rem的布局:

rem对应的是html{ font-size:“设定值”}
这里html的font-size的设定值是rem唯一的参考物,1rem=该设定值。
做响应式布局,弹性布局也好,这里要注意一下,要怎么处理这个rem。
这里要看你具体需求:
  1:引入淘宝的flexible
  2:写js动态去计算html的font-size的值
  3:通过@media screen and(min-width:最小值)and 
   (max-width:最大值){ html { font-size:设定值}},
    控制屏幕范围去控制rem的值。

这里我比较倾向第三种:

    1: 个人喜欢,虽然有点麻烦;
    2: 比较柔和,机动性强,可以兼容第三方的UI框架,这也是最重要的原因。
       有时候你引入的js动态改变了rem后和你引入UI框架的css冲突了,导致
       样式变的超级小或者超级大;
    3: 还可以根据屏幕尺寸去制定专属的rem,经过调试可以达到在各种机型下
       最优的效果
    

今天还遇到了一个禁用显示滚动条但不禁用效果的方法:

      ::-webkit-scroller{ display:none}
      直接包装元素添加该类即可

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/51803.html

相关文章

  • 我们来谈谈项目中遇到的需要兼容pc端和移动端的css布局

    摘要:首先在里面需要引入移动端属性布局方式之布局标题布局标题布局内容兼容端和移动端的布局获取屏幕宽度设置标签的大小为移动端效果图端效果图布局方式之弹性布局布局标题布局内容兼容端和移动端的 首先在head里面需要引入移动端属性: 1.css布局方式之div + css布局; 标题: div + css布局 内容: 兼容...

    sshe 评论0 收藏0
  • 我们来谈谈项目中遇到的需要兼容pc端和移动端的css布局

    摘要:首先在里面需要引入移动端属性布局方式之布局标题布局标题布局内容兼容端和移动端的布局获取屏幕宽度设置标签的大小为移动端效果图端效果图布局方式之弹性布局布局标题布局内容兼容端和移动端的 首先在head里面需要引入移动端属性: 1.css布局方式之div + css布局; 标题: div + css布局 内容: 兼容...

    miracledan 评论0 收藏0
  • 移动端rem布局的学习(基于自己写的一个网易云播放页面的思考)

    摘要:最近在看关于移动端的响应式布局,其中涉及到比较多的就是大小属性的设置等等,今天自己就捋一捋的用法。然而万一不能用该怎么办啊,所以还是要学会自己写原生的页面布局,也就会有今天的这篇文章了。的使用是指相对于根元素的字体大小的单位。 对于一个前端的初学者来说,首先要做好的事就是切页面了,切页面不得不说的就是布局了,布局的重要性不言而喻,为了良好的用户体验,提出了许多不一样的布局:响应式布局,...

    wums 评论0 收藏0
  • 移动端rem布局的学习(基于自己写的一个网易云播放页面的思考)

    摘要:最近在看关于移动端的响应式布局,其中涉及到比较多的就是大小属性的设置等等,今天自己就捋一捋的用法。然而万一不能用该怎么办啊,所以还是要学会自己写原生的页面布局,也就会有今天的这篇文章了。的使用是指相对于根元素的字体大小的单位。 对于一个前端的初学者来说,首先要做好的事就是切页面了,切页面不得不说的就是布局了,布局的重要性不言而喻,为了良好的用户体验,提出了许多不一样的布局:响应式布局,...

    he_xd 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<