位置: IT常识 - 正文

移动端适配详解 , 给你解决适配烦恼(移动端适配 px)

编辑:rootadmin
移动端适配详解 , 给你解决适配烦恼

推荐整理分享移动端适配详解 , 给你解决适配烦恼(移动端适配 px),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:移动端配置,移动端开发适配怎么做,移动端配置,移动端怎么适配各种机型,移动端怎么适配各种机型,2017年移动端如何适配,移动端适配 px,移动端适配rem,内容如对您有帮助,希望把文章链接给更多的朋友!

试想一下,如果我们只能开发web端,那么移动端的网友由谁来做!那也太悲惨了

所以,这里说的就是如何开发页面到移动端,适配各个手机型号,让页面在手机上跑起来~ 

目录

理解些许概念

1. 开发的种类

2. 两个模糊的概念

3. 认识视口

布局视口 : 

视觉视口 : 

理想视口 : 

适配方案一:百分比设置 (不推荐)

适配方案二:rem + 动态html的font-size

问题一的解决方式:

1 - 媒体查询

2 - JS动态计算

3 - 使用lib-flexible库

问题二的解决方式: 

1 - 手动计算 :

2 - 使用scss的函数或者less的混入来计算

        less文件设置

3 - 使用postcss-pxtorem插件 

        01. 安装

        02. 在postcss.config.js中配置

        03. 这样在页面上我们还是直接写px即可,打包后后自动更改的 

4 - 使用VSCode插件 : px to rem 插件

        01. 下载

        02. 配置

        03. 使用

适配方案三:vw 

1 - 手动计算 :

2 - 使用scss的函数或者less的混入来计算

3 - 使用postcss-px-to-viewport插件

01. 下载

02. 在postcss.config.js中配置

03. 这样在页面上我们还是直接写px即可,打包后后自动更改的 

4 - 使用VSCode插件 : px to rem 插件

适配方案四:flex的弹性布局


理解些许概念1. 开发的种类

移动端开发目前主要包括三类

原生App开发 ( iOS Android RN uniapp Flutter 等 ) 小程序开发 ( 原生小程序 uniapp Taro 等 ) web页面 ( 移动端的web页面 ,可以使用浏览器或者webview浏览,可以内嵌进小程序、app )2. 两个模糊的概念

自适应 : 根据不同的设备屏幕大小来自动调整尺寸、大小

响应式 : 会随着屏幕的实时变动而自动调整,是一种自适应 

3. 认识视口

概念 : 

在浏览器中,可以看到的区域就是视口fixed就是相对于视口来进行定位的在pc端的页面中,我们不需要对视口进行区分,因为布局视口和视觉视口是同一个

但是在移动端,不太一样,布局的视口和可见的视口是不太一样的,有三种情况

布局视口 : 

相对于980ox布局的这个视口,默认是980px

视觉视口 : 

默认情况下,按照980px来显示的内容,右侧就会有一大部分区域无法展示,所以手机端浏览器会默认对页面进行缩放用来显示到用户的可见区域

显示在可见区域的这个视口,就是视觉视口

 

理想视口 : 

 当布局视口 === 视觉视口的时候,就称之为理想视口

 那么怎么让他们俩相等呢,视觉视口不能更改(手机频幕怎么改~),但是布局视口可更改:

<!-- 这里设置的width就是布局视口的宽度 默认是980px。width=980px 我们一般会改成device-width,让布局视口等于设备宽度--><meta name="viewport" content="width=device-width">

 完美的配置,个人认为

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

适配方案有以下四种:

适配方案一:百分比设置 (不推荐)因为不同属性的百分比值,相对的可能是不同参照物,所以百分比往往很难统一在移动端适配中使用时很少的适配方案二:rem + 动态html的font-size

rem的单位是相对于html元素的font-size来设置的,如果我们需要在不同的屏幕下有不同的尺寸,可以动态的修改html的font-size的值

这样就变成了我们要思考这两个问题

问题一 : 针对不同的屏幕,设置html不同的font-size问题二 : 讲原来要设置的尺寸,转化成rem单位问题一的解决方式:1 - 媒体查询移动端适配详解 , 给你解决适配烦恼(移动端适配 px)

通过媒体查询来设置不同尺寸范围内的屏幕html的font-size尺寸

缺点:针对不同屏幕编写大量的媒体查询 、 动态改变尺寸,不会实时的进行更新

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <title>Document</title> <style> /* 利用css的层叠特性 */ @media screen and (min-width: 320px) { html { font-size: 16px; } } @media screen and (min-width: 375px) { html { font-size: 18px; } } @media screen and (min-width: 414px) { html { font-size: 20px; } } @media screen and (min-width: 480px) { html { font-size: 22px; } } .box { width: 5rem; height: 5rem; background-color: skyblue; } </style></head><body> <div class="box"></div></body></html>2 - JS动态计算

1. 根据html的宽度计算出font-size的大小,并设置到html上

2. 监听页面宽度的实时变化,重新设置font-size到html上

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <title>Document</title> <style> .box { width: 5rem; height: 5rem; background-color: skyblue; } </style></head><body> <div class="box"></div> <script> // 拿到html元素 const htmlDom = document.documentElement // 改变的函数 function serRemFontSize() { // 拿到屏幕的宽度 const htmlWidth = htmlDom.clientWidth // 计算fontsize的大小 const htmlFontSize = htmlWidth / 10 // fontsize赋值到html上 htmlDom.style.fontSize = htmlFontSize + 'px' console.log(htmlWidth); } // 第一次进来时主动调用一下 serRemFontSize() // 实时监听屏幕尺寸改变的函数 window.addEventListener('resize', serRemFontSize) // 监听页面跳转(前进或者后退),重新设置一下 window.addEventListener('pageshow',function(e){ if (e.persisted) { serRemFontSize() } }) </script></body></html>3 - 使用lib-flexible库

做的事情时一样的,直接引用即可 lib-flexible

一、// 先安装npm i -S amfe-flexible// 在页面处引用<script src="./node_modules/amfe-flexible/index.js"></script>二、找到index.js 文件,打开复制代码下来也可问题二的解决方式: 

加入设计图是375的,页面上一个元素的宽是100px,那么我们得转换成rem

1 - 手动计算 :

用计算器算。100px / html的font-size  =  100 / 37.5 = 2.66667 

width = 2.66667 rem

2 - 使用scss的函数或者less的混入来计算        less文件设置@textColor:#12345678;.poToRem(@px){ // 375 -> 37.5 根据设计稿来的 设计稿375px 那就 / 37.5 result:1rem * (@px / 37.5)}// 使用less.box{ // 利用混入来设定 width: .poToRem(100)[result]; height: .poToRem(100)[result];}p{ font-size: .poToRem(16)[result];}3 - 使用postcss-pxtorem插件 

webpack的这个工具,在打包时会自动换算,可以看看我的这个文章webpack 插件

        01. 安装npm install postcss-pxtorem --save-dev        02. 在postcss.config.js中配置module.exports = { plugins: [ require('postcss-preset-env'), // 使用这个插件 require('postcss-pxtorem')({ rootValue: 37.5, // 设计稿宽度的1/10 propList: ['*'], // 需要做转化处理的属性,如`hight`、`width`、`margin`等,`*`表示全部 exclude: /node_modules/i // 忽略的文件 }) ]};        03. 这样在页面上我们还是直接写px即可,打包后后自动更改的 4 - 使用VSCode插件 : px to rem 插件        01. 下载

        02. 配置

点击齿轮⚙️ ,选择扩展设置

        03. 使用

适配方案三:vw 

相对于屏幕视口大小,屏幕宽 = 100vw

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <title>Document</title> <style> /* 375 => 1vw = 3.75px */ .box { /* 100px 转换单位 */ /* 100 / 3.75 = 26.667vw */ width: 26.667vw; height: 26.667vw; background-color: skyblue; } </style></head><body> <div class="box"></div> </script></body></html>

注意 : vw 永远相对于视口大小,如果视口很大,那么页面的元素也会很大,没办法设置最大最小值

rem可以,rem可以通过媒体查询,设定最大宽度的font-size 

使用vw 就没有rem的问题一了  只有问题二!!!

1 - 手动计算 :

同上rem计算~

2 - 使用scss的函数或者less的混入来计算

同上rem计算~

3 - 使用postcss-px-to-viewport插件01. 下载npm install postcss-px-to-viewport -D02. 在postcss.config.js中配置module.exports = { plugins: [ require('postcss-preset-env'), // 使用这个插件 require('postcss-px-to-viewport')({ unitToConvert: 'px', // 需要转换的单位,默认为"px" viewportWidth: 375, // 视窗的宽度,对应pc设计稿的宽度,一般是750 // viewportHeight: 1080,// 视窗的高度,对应的是我们设计稿的高度 unitPrecision: 5, // 单位转换后保留的精度 propList: [ // 能转化为vw的属性列表, * 代表所有 '*' ], viewportUnit: 'vw', // 希望使用的视口单位 fontViewportUnit: 'vw', // 字体使用的视口单位 selectorBlackList: ['#abc','ignore','tabbar','tabbar-item'], // 需要忽略的CSS选择器,不会转为视口单位,使用原有的px等单位。cretae minPixelValue: 1, // 设置最小的转换数值,如果为1的话,只有大于1的值会被转换 小于或等于'1px'不转换为视窗单位 mediaQuery: false, // 媒体查询里的单位是否需要转换单位 replace: true, // 是否直接更换属性值,而不添加备用属性 exclude: /(\/|\\)(node_modules)(\/|\\)/ // 忽略某些文件夹下的文件或特定文件,例如 'node_modules' 下的文件 exclude:[/DetailBottomBar/,/TabbarItem/] //包含DetailBottomBar的文件不需要转化 // landscape: true, // 是否添加根据landscapeWidth 生成的媒体查询条件 // landscapeUnit: 'rem', // 横屏时使用的单位 // landscapeWidth: 5120 // 横屏时使用的视窗宽度(横屏的尺寸为938px) /** * @keyframes 和 media 查询里的px默认时不转化的,设置mediaQuery : true 则媒体查询里的也会转换px * @keyframes 可以暂时手动填写vw单位的转化结果 */ }) ]};03. 这样在页面上我们还是直接写px即可,打包后后自动更改的 4 - 使用VSCode插件 : px to rem 插件

移动端适配主要是以上两种方法,第一种的百分比的用的比较少

适配方案四:flex的弹性布局

我想,大家都懂吧!嗯,肯定懂

 补充 :以下是一些概念,很抽象,虽然不懂也能开发,但是面试可能会考哦~

本文链接地址:https://www.jiuchutong.com/zhishi/298696.html 转载请保留说明!

上一篇:毕业设计-基于 MATLAB 的工业机器人运动学分析与实现(毕业设计教程)

下一篇:iframe嵌套页面传值(iframe嵌套页面点击里面的按钮)

  • AR增强现实技术在市场营销中的应用方法(ar增强现实技术定做)

    AR增强现实技术在市场营销中的应用方法(ar增强现实技术定做)

  • 天猫精灵cc7屏幕多大(天猫精灵cc7屏幕只显示时间设置)

    天猫精灵cc7屏幕多大(天猫精灵cc7屏幕只显示时间设置)

  • 如何添加微信扫码付款的人(如何添加微信扫一扫到桌面快捷方式)

    如何添加微信扫码付款的人(如何添加微信扫一扫到桌面快捷方式)

  • 聊天界面有个耳朵(聊天时出现一个耳朵是怎么设置?)

    聊天界面有个耳朵(聊天时出现一个耳朵是怎么设置?)

  • iPhone 12支持北斗导航系统吗(iphone12支持北斗导航吗)

    iPhone 12支持北斗导航系统吗(iphone12支持北斗导航吗)

  • 陌陌卸载后对方看到的是什么(陌陌卸载后对方发信息我能收到吗?)

    陌陌卸载后对方看到的是什么(陌陌卸载后对方发信息我能收到吗?)

  • iphone7p麦克风启用不成功(iphone7p麦克风启用不成功怎么修)

    iphone7p麦克风启用不成功(iphone7p麦克风启用不成功怎么修)

  • 5g兼容4g吗(5g网兼容4g网么)

    5g兼容4g吗(5g网兼容4g网么)

  • iphone7p有没有nfc功能(iPhone7p有没有实况)

    iphone7p有没有nfc功能(iPhone7p有没有实况)

  • led灯驱动器坏了咋办(led灯驱动器坏了怎么配)

    led灯驱动器坏了咋办(led灯驱动器坏了怎么配)

  • 淘宝修改评价可以改评分吗(淘宝修改评价可以恢复吗)

    淘宝修改评价可以改评分吗(淘宝修改评价可以恢复吗)

  • 注册支付宝收不到验证码怎么回事(注册支付宝收不到邮件)

    注册支付宝收不到验证码怎么回事(注册支付宝收不到邮件)

  • 声卡插在主板的什么位置(声卡插在主板的哪个位置)

    声卡插在主板的什么位置(声卡插在主板的哪个位置)

  • 抖音极速版绑定支付宝安全吗(抖音极速版绑定异常怎么回事)

    抖音极速版绑定支付宝安全吗(抖音极速版绑定异常怎么回事)

  • 苹果11和苹果11pro区别(苹果11和苹果11pro手机壳通用吗)

    苹果11和苹果11pro区别(苹果11和苹果11pro手机壳通用吗)

  • 华为自带app能删除吗(华为手机删自带应用)

    华为自带app能删除吗(华为手机删自带应用)

  • 不换套餐能使用5g吗(手机套餐不换可以一直用吗)

    不换套餐能使用5g吗(手机套餐不换可以一直用吗)

  • 纸张大小怎么设置(纸张大小怎么设置a5)

    纸张大小怎么设置(纸张大小怎么设置a5)

  • 苹果手机怎么把信号变成数字(苹果手机怎么把照片传到另一个苹果手机上)

    苹果手机怎么把信号变成数字(苹果手机怎么把照片传到另一个苹果手机上)

  • 怎么把照片分辨率调低(怎么把照片分辨率改为300)

    怎么把照片分辨率调低(怎么把照片分辨率改为300)

  • vivox27不支持面部解锁吗(vivox27为什么不能设置面部解锁)

    vivox27不支持面部解锁吗(vivox27为什么不能设置面部解锁)

  • par一tl20是什么型号(par|s是什么意思)

    par一tl20是什么型号(par|s是什么意思)

  • 微信号封八天,怎么当天解封(微信号封8天)

    微信号封八天,怎么当天解封(微信号封8天)

  • 如何关闭IPv6协议(关闭 ipv6)

    如何关闭IPv6协议(关闭 ipv6)

  • 电脑上不去游戏是怎么回事?怎么才能正常玩游戏?(电脑游戏没法玩怎么办)

    电脑上不去游戏是怎么回事?怎么才能正常玩游戏?(电脑游戏没法玩怎么办)

  • win10安装office提示:错误1907无法注册字体的解决方法(w10系统安装office)

    win10安装office提示:错误1907无法注册字体的解决方法(w10系统安装office)

  • win8系统还原怎么操作呢?win8电脑系统还原详细步骤(win8电脑系统还原)

    win8系统还原怎么操作呢?win8电脑系统还原详细步骤(win8电脑系统还原)

  • phpcms是收费的么(phpcms 用的是什么模板引擎)

    phpcms是收费的么(phpcms 用的是什么模板引擎)

  • 合理避税与偷税漏税的行为区别
  • 什么是代扣代缴申报
  • 银行的划分标准
  • 红冲的发票能不能取消
  • 物流运输业务
  • 专利年费是不是只能一项一项交
  • 冲红发票怎么写备注
  • 鉴证服务的税率有哪些
  • 所属税务机关是根据什么分配的
  • 小企业会计准则和一般企业会计准则的区别
  • 招拍挂方式取得土地,应该取得土地后立项
  • 保证金抵扣货款分录
  • 股权稀释需要交税吗
  • 借给股东的借款怎么做账
  • 企业长期股权投资中发生的相关费用处理方法正确的有
  • 企业员工无偿使用合法吗
  • 现金折扣税前扣除
  • 水电费差价收入计算增值税公式是怎样的?
  • 增值税附加税减半征收政策
  • 个人出租房屋合同协议书
  • 公司为员工交的五险一金到底是怎么回事
  • 教育费附加减免性质代码
  • 外包人员培训费入什么科目
  • 劳务费属于会计什么科目
  • 合伙企业营业执照多少钱
  • 电子发票上传平台失败是什么意思
  • 单位收到项目前的钱
  • 公司内收取的礼金
  • 应付职工薪酬年底怎么结转
  • 公司分期付款购车账务处理
  • php文件类型码
  • php的使用
  • 方正书版10.0教程
  • win11桌面右键失效
  • 苹果7旧换新
  • 普通发票主营业务收入销项负数发票怎么做账
  • 营改增后增值税税率
  • 车辆违章罚款可以报销吗
  • 纳税申报方式的税务申报工作常规流程图
  • 资产盘盈盘亏处理
  • php与js交互
  • 单位延缓缴纳社保员工可以要求赔偿吗
  • 销售退回的会计分录金额
  • 转销坏账准备的会计分录有一个还是两个
  • 记账软件的作用
  • 尚融宝盈(宁波)投资中心(有限合伙)
  • 折旧与摊销会计分录
  • 其他综合收益的借贷方向
  • css设置渐变色背景
  • 提供餐饮服务购入农产品的进项税额抵扣问题
  • 残疾人报税怎么报
  • 函数的单调性
  • 结转制造费用金额
  • 工会经费申报的依据
  • 销售农产品是否交消费税
  • 商业承兑汇票在网银上怎么查询
  • 个体户开出的发票没跟对方说自己冲红了怎么办
  • SQL Server 2008中SQL查询语句字段值不区分大小写的问题解决
  • 采用汇兑的方式归还前欠货款
  • 小公司没有财务软件怎么手工记账
  • 库存商品过期了还能用吗
  • 企业收到政府补助金80 000元,存入银行
  • 股东转公户的钱叫什么
  • 应交税费为负数在资产负债表中的列报
  • 收到稳岗补贴要交税吗
  • 营改增后混凝土税率
  • 留抵税额可以抵欠税吗
  • 餐饮企业的内部营销
  • mysql删除表数据怎么恢复
  • 开机时显示
  • win8系统桌面图标怎么变小
  • linux cp命令怎么用
  • linux windows转linux
  • perl列表去重
  • unity4.x升级到unity5.x材质丢失
  • cocos2d官网
  • 利用js脚本模拟鼠标点击事件
  • js响应事件的过程
  • 保险公司代收2.8万
  • 定额发票怎么查流向
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设