移动端的布局方案

移动端的布局方案

  1、使用 媒体查询+rem单位

  2、使用vw单位 + rem单位布局

  3、使用js + rem单位布局

  4、使用sass + vw单位布局

  1、使用 媒体查询+rem单位

  原理:利用媒体查询检测设备的特性,根据设备来改变根节点的字体大小

  实现步骤:

  (1)通过媒体查询来改变根节点的字体大小

@media all and (min-width: 320px) {
     html {
            font-size: 32px;
        }
}
@media all and (min-width: 375px){
    html{
        font-size: 37.5px;
    }
}

  (2)页面当中元素的布局都用rem单位,就能达到适配的状态

div {
    width: 10rem;
    height: 100px;
    background: red;
}

  缺点:不能精细的适配到每一个设备,代码量较大

  2、使用vw单位 + rem单位布局

  原理:屏幕大小变化的时候,用vw作为单位的值也会跟着改变,用vw作为根节点的字体大小的单位,所以在不同的屏幕大小或者设备中,根节点的字体大小的值就不一样,rem单位得到的值就不一样

  实现步骤:

  (1)使用vw单位作为 HTML font-size的单位(计算)

  // 如果设计图为750px,那么我们需要设置一下代码

  html{

  font-size: 13.33333333vw

  }

  (2)页面所有布局使用rem单位

  div{

  //这样我们写1rem即为设计稿上的100px

  width:1rem; // 在页面中显示的值为 50px

  height:1rem;

  }

  问题:为什么根节点字体大小为写13.33333333vw,为什么100px = 1rem?

  750px = 100vw

  1px = 100 / 750 = 0.133333333333333vw

  100px = 0.133333333333333vw *100px = 13.33333333vw

  rem的 值是根据 跟根节点的字体大小来计算的,设置根节点的字体大小为100px,是为了方便计算

  最终于得出 100px = 1rem

  3、使用js + rem单位布局

  原理:通过js获取设备的宽度,来计算根节点的字体大小,rem得出来的值就不一样,就到达不同页面能适配

  我们可以在编辑器里面安装一个扩展插件来自动计算px---->rem

  (1)在vscode的扩展里面安装插件:cssrem

  (2)然后在vscode配置文件中更改:rootfontsize为设计图 / 10的数字

  (3)在页面中使用script标签引入获取设备的特性更改根节点地质体大小的 js文件

  (4)在页面中的所有布局都用rem作为单位,设计图量处的值为多少就写多少,但是要选择转换成rem的那个值

  4、使用sass + vw单位布局

  原理:使用vw作为页面所有元素的布局单位,简化之前rem + vw结合的布局

  (1)使用sass的函数:


@function vw($px) {
    @return ($px / 设计图的宽度) * 100vw;
}

  (2)页面中布局

header {
	 height: vw(量出来的值);
  	background: green;
 	 font-size: vw(48);
}

 

发布了330 篇原创文章 · 获赞 214 · 访问量 47万+
展开阅读全文

没有更多推荐了,返回首页

分享到微信朋友圈

×

扫一扫,手机浏览