移动端适配的几种方案

移动端适配的几种方案

viewport即视窗、视口,用于显示网页部分的区域,在PC端视口即是浏览器窗口区域,在移动端,为了让页面展示更多的内容,视窗的宽度默认不为设备的宽度,在移动端视窗有三个概念:布局视窗、视觉视窗、理想视窗。

  • 布局视窗:在浏览器窗口css的布局区域,布局视口的宽度限制css布局的宽。为了能在移动设备上正常显示那些为pc端浏览器设计的网站,移动设备上的浏览器都会把自己默认的viewport设为980px或其他值,一般都比移动端浏览器可视区域大很多,所以就有横向滚动条。
  • 视觉视窗:终端设备显示网页的区域
  • 理想视窗:针对当前设备最理想的展示页面的视窗,不会出现横向滚动条,页面刚好全部展现在视窗内,理想视窗即终端屏幕的宽度。

viewport详细设置

  • 通过设置viewport可以设置页面大小,通过meta标签可以设置viewport信息。
  • viewport有以下几个属性:
    • width:视口的宽度,正整数或设备宽度device-width
    • height:视口高度,正整数或device-height
    • initial-scale:网页初始缩放值,小数缩小,反之放大
    • maximum-scale:缩放最大值
    • minimum-scale:缩放最小值
    • user-scaleble:用户是否可以缩放
适配方案

将页面的宽度设置为设置的视窗宽度后,就可以适配了。

在屏幕大小不同的终端设备拥有统一的界面,让拥有更大屏幕的终端展示更多的内容,核心思路是:页面内容充满整个视窗。

  • rem布局

    • 修改HTML元素的字体大小可以成比例的调整以rem为单位的属性,通过这一属性,我们可以实现将视窗按一定比例划分为一分一分的,当页面内元素刚好分完所有的份数,页面内容即充满整个视窗且无横向滚动条。

    • 搭配postcss-pxtorem搭建项目

      • 动态设置rem的值

      • 安装postcss-pxtorem

        • npm i postcss-pxtorem --save-dev
          
          //使用postcss-pxtorem
          module.exports = {
              lintOnSave:true,
              css:{
                  loaderOptions:{
                      postcss:[
                          require('postcss-pxtorem')({
                              rootValue:16,//根元素字体大小
                              unitPrecision:5, //允许rem单位增长的十进制数字
                              replace:true, //替换包含rems的规则,而不添加后备
                              mediaQuery:false, //允许在媒体查询中转换px
                              minPixelValue:0, //设置要替换的最小像素值
                              selectorBlackList:[], //忽略转换正则匹配项
                              propList:['*'], //可以从px转换为rem的属性,匹配正则
                              exclude:/node_modules/i  要忽略并保留为px的文件路径
                          }),
                      ]
                  }
              }
          }
          
    • rem布局更好地实现在不同尺寸的屏幕横向填满屏幕,且在不同屏幕元素大小比例一致。但在大屏设备上,元素尺寸会很大,页面显示更少的内容。

    • 大屏改进方案:

      • 限制rem的最大值
      • 通过媒体查询,限制内容最大宽度
  • vw/vh布局

    • 将页面分为100份,1vw = device-width/100
    • 搭建postcss-px-to-viewport搭建项目
    • vw,vh布局能良好的实现在不同尺寸的屏幕横向填满屏幕,使用postcss-px-to-viewport能更好地进行单位转换。
    • 但无法修改vw/vh值,兼容性,大多浏览器支持,低版本不支持。
  • 百分比布局

    • 百分比计算u地开发来说并不友好,且元素百分比参考的对象是父元素,元素嵌套较深会有问题。
  • 响应式布局

    • 通过媒体查询,可以针对不同的屏幕进行单独设置,但针对所有的屏幕尺寸做适配显然是不合理的。
  • px为主,搭配vw/vh、媒体查询与flex进行布局

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值