移动端适配的几种方案

移动端适配的几种方案

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进行布局