小小千想和您聊一聊

当前位置: 首页> 技术分享> 移动端的布局方案

移动端的布局方案

  移动端的布局方案

  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);
}

上一篇:HTML5 DOM 新增数据类型

下一篇:如何真机测试web页面

QQ技术交流群

千锋HTML5官方②群
857920838

加入群聊

用户登录

手机号:

密码:

图形验证码:

点击切换

用户注册

手机号:

登录密码:

图形验证码:

点击切换

短信验证码:

获取验证码

忘记密码

1安全验证

2重置密码

手机号:

图形验证码:

短信验证码:

获取验证码

忘记密码

1安全验证

2重置密码

新密码:

确认新密码:

获取课程

添加小千老师微信,获取课程信息

如何获取课程?

一、需拥有此本教材

如没有,可点击下方入口购买当当购买入口京东购买入口

二、添加小千老师,发送拥有凭证,解锁课程资源

1.购买该教材的订单信息
2.拥有的实体书信息等

更换手机号

新手机号:

图形验证码:

短信验证码:

获取验证码