移动端适配问题

作者: 吃掉代码 | 来源:发表于2020-07-03 11:18 被阅读0次

前言

最近自己在整一个移动端的项目,自认为之前已经开发过很多的移动端项目,对适配还算比较了解,但是这次在做的时候自己静下心来考虑,现在的适配方式有很多种,那么在做项目的时候我应该选择哪种方式来做适配呢?

适配方式

1.rem

这种方式相信用的人还是比较多的,我也一直在用。原理非常简单,rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。在加上一段js动态设置html的font-zise大小,这样在不同设备上的展示就是无限接近相同。

function setRem () {
  var width=document.documentElement.clientWidth;
  var styleNode=document.createElement("style");
  styleNode.innerHTML="html{font-size:"+ width/10 +"px !important}";
  document.head.appendChild(styleNode);
}

// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = debounce(function () {
  setRem()
},500);

lib-flexible淘宝项目组开发出来的一个小插件,属于开源项目,可以在各类项目中引入并使用。这个插件可以直接在项目中写px,它帮助你转换成rem。
这篇文章是介绍怎么使用:lib-flexible适配大屏方案(附移动端适配)

2、vw,vh布局

vh、vw方案个人理解就是百分比布局,只不过是相对于视觉视口的百分比。将视觉视口宽度 window.innerWidth和视觉视口高度 window.innerHeight 等分为 100 份。

image.png

这个方案在写的时候也会遇到和rem一样需要转换单位,而且px转换成vw不一定能完全整除,因此有一定的像素差。

不过可以使用webpack解析css 的时候用postcss-loader 有个postcss-px-to-viewport能自动实现px到vw的转化。

{
    loader: 'postcss-loader',
    options: {
        plugins: ()=>[
            require('autoprefixer')({
                browsers: ['last 5 versions']
            }),
            require('postcss-px-to-viewport')({
                viewportWidth: 375, //视口宽度(数字)
                viewportHeight: 1334, //视口高度(数字)
                unitPrecision: 3, //设置的保留小数位数(数字)
                viewportUnit: 'vw', //设置要转换的单位(字符串)
                selectorBlackList: ['.ignore', '.hairlines'], //不需要进行转换的类名(数组)
                minPixelValue: 1, //设置要替换的最小像素值(数字)
                mediaQuery: false //允许在媒体查询中转换px(true/false)
            })
        ]
}

3.rem+vw

因为rem的方式根元素font-size值强耦合,系统字体放大或缩小时,会导致布局错乱,并且html文件头部需插入一段js代码。那么利用vw的方式来设置根元素的font-zise,省去那一小段js代码,让你的代码更纯粹。

以750的图纸为例
//375 / 100 = 3.75
//为了方便计算,使用100px
//100 / 3.75 = 26.66666666666667vw
//这里就得出26.66666666666667 = 100px
html {font-zise: 26.66666666666667vw }

//70 / 100 = 0.7
div {
  width:0 .7rem
}

4.px为主,vx和vxxx(vw/vh/vmax/vmin)为辅,搭配一些flex

这是看到一位大佬写的文章后了解到的一种适配方式
原文地址:面试官:你了解过移动端适配吗?
这套方案的中心思想,用户之所以去买大屏手机,不是为了看到更大的UI,而是为了看到更多的UI。

适配流程
  1. 在head 设置width=device-width的viewport‘
  2. 在css中使用px
  3. 在适当的场景使用flex布局,或者配合vw进行自适应
  4. 在跨设备类型的时候(pc <-> 手机 <-> 平板)使用媒体查询
  5. 在跨设备类型如果交互差异太大的情况,考虑分开项目开发

我在尝试过这套方案之后存在一些疑问,屏幕大的上面确实做到了可以展示更多的ui,小屏幕上的展示也友好,就是写的时候繁琐,还有就是轮播图的高度因为是写px的所以在大屏上会被挤压。

相关文章

  • 多易日记进程

    10.29 解决移动端适配问题:采用手淘写的lib-flexible解决移动端的适配,采用pxToRem解决px转...

  • echarts.js 仿网商银行app定活宝模块的 历史支取

    移动端适配问题 本人用的flexible 插件

  • 移动端rem适配

    三:多屏适配布局问题 出处:【原创】移动端高清、多屏适配方案 再谈移动端适配和点5像素的由来 使用相对单位:rem...

  • 移动端适配及1px边框问题

    1、移动端适配 2、1px边框问题

  • 移动端适配问题

    移动端适配问题 在head中设置: javascript 样式写法:

  • 移动端适配问题

    适配是什么:在不同尺寸的手机设备上,页面相对性的达到合理的展示(自适应)或者保持统一效果的等比缩放(看起来差不多)...

  • 移动端适配问题

    前言 最近自己在整一个移动端的项目,自认为之前已经开发过很多的移动端项目,对适配还算比较了解,但是这次在做的时候自...

  • 移动端-适配问题

    适配方案 固定高度,宽度自适应垂直方向使用固定的值,水平方向使用弹性布局,元素采用定值、百分比、flex布局等。这...

  • 书签管理器4

    移动端问题 关于移动端适配,你必须要知道的 - 掘金 稍微整理了几个经常在...

  • 移动端适配

    移动端适配

网友评论

    本文标题:移动端适配问题

    本文链接:https://www.haomeiwen.com/subject/plwjqktx.html