移动端适配问题

1.自动适应屏幕宽度viewport
在html中添加meta标签:网页的宽度默认等于屏幕的宽度  

<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0">

 扩展viewport属性:

 1>width 设置viewport的宽度,可以是数字,或者使用字符串“device-width”;

 2>initial-scale 页面初始的缩放,首次 load 的时候缩放比例

 3>minimum-scale/maximum-scale 允许用户缩放的最小/最大比例

 4>height 设置viewport的高度,很少设置这个属性

5>user-scalable 用户是否可以手动缩放 ,一般两个值 yes/no

2.使用框架搭建页面
1> bootstrap(基于jQuery的响应式工具,适用于移动,pad,pc)

2> ElementUI(PC),MintUI(移动端) 饿了么基于vue组件库开发的

3.宽度的严格布局书写
因为页面根据屏幕的宽度调整布局,所以不能使用绝对宽度的布局或者是绝对宽度的元素
一般使用width:50% / width:auto (块级元素默认是auto)

4.图片自适应
img {max-width:100%} 由于老的IE不支持max-width{width:100%}

常见问题
1. border 1px 问题
不是所有手机浏览器都能识别border: 0.5px;,ios7以下,android等其他系统里,0.5px会被当成为0px处理
通常是给元素order-bottom: 1px solid #ddd;,然后通过transform: scaleY(.5)缩小0.5倍来达到0.5px的效果,

2.屏幕适配布局问题
响应式布局
流式布局+媒体查询
用来解决不同宽度的布局问题,父级宽度不够的时候,子级节点会“挤下去” — 使用css3,根据屏幕分辨率进行不同的样式应用

伸缩布局
使用的是Flexbox ,有兼容性问题。

rem布局
相对单位rem基准值公式:rem=document.documentElement.clientWidth*dpr/10(10是为了取整)
赋值给html的font-size:rem
demo:iPhone4/5 320*2/10=64px
如需改变根节点的html的font-size的rem 属性可以通过媒体查询/javascript操作

rem是根据html的font-size大小来变化,正是基于这个出发,我们可以在每一个设备下根据设备的宽度设置对应的html字号,从而实现了自适应布局。
目前有两种,一种是根据js来调整html的字号,另一种则是通过媒体查询来调整字号。

rem和em区别
区别在于:em是相对于元素的父元素的font-size进行计算rem是相对于根元素html的font-size进行计算
默认情况下浏览器给的字体大小是16px,因此按照转化关系 16px = 1rem。
那么rem的自适应是如何处理呢?
在使用rem布局的时候,为了兼容不同的分辨率,我们应该动态的改变根字体的大小,让所有的用rem单位的子元素跟着一起缩放,从而达到自适应的效果。

对于Vue 3移动端适配问题,可以参考以下步骤: 1. 首先,可以使用一个公共方法来判断是否为移动端。你可以将以下代码添加到你的代码中: ```javascript export function isPc() { if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) { return false; } else { return true; } } ``` 这个方法会根据用户的User Agent来判断是否为移动端。 2. 其次,你可以使用postcss-pxtorem插件来实现rem适配。在你的根目录下创建一个postcss.config.js文件,并添加以下代码: ```javascript module.exports = { "plugins": { "postcss-pxtorem": { rootValue: 37.5, // Vant 官方根字体大小是 37.5 propList: ['*'], selectorBlackList: ['.norem'] // 过滤掉.norem-开头的class,不进行rem转换 } } } ``` 这个配置文件会将像素自动转换为rem单位,方便移动端适配。 3. 如果你在针对iPad和iPad Pro设备时遇到无效的问题,你可以在index.html文件中添加以下代码: ```html <script> /(pad|pod|iPad|iPod|iOS)/i.test(navigator.userAgent) && (head=document.getElementsByTagName('head'),viewport=document.createElement('meta'),viewport.name='viewport',viewport.content='target-densitydpi=device-dpi, width=480px, user-scalable=no',head.length>0&&head<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [vue项目的移动端适配方案](https://blog.youkuaiyun.com/weixin_40758662/article/details/131812827)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *3* [vue3-移动端适配](https://blog.youkuaiyun.com/m0_65791412/article/details/125177494)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值