移动端布局概念的详解

我是研究僧i 提交于 2020-03-17 15:45:52

大家好,我们是逆战班的,接下来讲解的是什么是移动端布局
百分比弹性布局:
移动端页面基本上和web端区别不大 但要考虑到 移动端屏幕尺寸不大并且都是全屏布局 而且 屏幕尺寸都不一样
所有不能使用网页的固定尺寸来布局 需要使用百分比来布局
移动端布局的优缺点
优点:
移动端基本都兼容h5 css3 所有可以放心的去使用css3的样式来布局
移动端页面一般都不大 所以标签使用的并不多 相对一个一面开发时间没web端长
缺点
移动端宽高尺寸不同 因此测量尺寸成为了一个难题 无法非常精确的写尺寸
新单位 rem
rem是永远获取html的font-size值
然后通过js获取屏幕尺寸 制定出一个系数 去改变html的font-size值
w,vh 永远获取屏幕宽高
100vw=屏幕的宽度
1vw=1%屏幕尺寸
这样更直观的获取百分比 但是少部分手机不支持 所以需要自己把控
要移动端尺寸显示正常需要加上以下meta

流式布局:
流式布局,顾名思义就是流动的布局,随着屏幕窗口的大小页面的内容像水一样的流动,但不影响整体的布局。
简单的来说就是百分比布局,非固定像素,内容向两侧填充的一种布局。
但是目前使用流式布局的公司非常多,比如 亚马逊 、京东 、携程
好处: 大屏幕下显示更多的内容。
坏处:宽屏下比例会有一些不协调。
rem布局
rem布局,宽高自适应,能实现整个页面像一张图片一样缩放且不失真的效果。
与less配合使用更加方便,目前使用rem布局的有:淘宝 、 苏宁
好处: 大屏幕下显示更多的内容。
坏处:宽屏下比例会有一些不协调。’
单位:
em:是一个相对单位,1em等于当前元素或父元素的font-size值。若当前元素没有设置font-size,则一层一层网上找,直到有父元素设置font-size。

rem:是一个相对单位,1rem等于根元素(即html)的font-size值

vw/vh:把屏幕分成100份,1vw等于屏幕宽的1%
如何做到font-size动态化?

  1. 通过JS (JavaScript)
    ocument.documentElement.clientWidth -> 获取布局视口的宽度。
    在iphone 6 -> document.documentElement.clientWidth -> 375
    在iphone 6 plus -> document.documentElement.clientWidth -> 414

    在iphone 6 -> font-size 100px ?
    document.documentElement.clientWidth(375) / 3.75 -> 100

    在iphone 6 plus -> font-size 大于 100px ?
    document.documentElement.clientWidth(414) / 3.75 -> 110.4

  2. 通过vw (vw是尺寸单位)

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!