前端开发之移动端适配详细讲解
适配问题
怎么适配iphone6
1px问题
为什么页面与设计稿会出现偏差?
dpr=设备像素/ css像素
,只有dpr等于1的时候,实际效果和设计稿的尺寸比例才是1:1。
因为iPhone6的DPR(设备像素比)为2,设备像素为750,所以iPhone6的理想视口尺寸为375px。
因为设计稿是基于设备像素,页面是基于css像素的。css中的宽度是基于理想视口的(宽度375px),设计图上是基于设备宽度750px,所以尺寸不对。
怎么处理?
init-scale=0.5
。
缺陷:但是宽度不能自适应
⭐️rem大法
基于html
标签的font-size
设置的
手淘的做法:
把缩放尺寸设置成dpr的倒数。
读设备宽度,动态设置meta标签的 content属性中的maximun
,minimum
,user-scable
值
<html>
<head>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="" />
<style>
body{
margin: 0;
padding: 0;
}
.box{
width: 2.66666667rem;
height: 2.66666667rem;
background: red;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
var scale = 1 / window.devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
</script>
</body>
</html>
网易的做法
现在的设计稿都是750px宽度(p6的宽),那要想实现 css样式:设计图=1:100
这种比较方便的折算方式,font-size就要设置成7.5px;
也就是说1rem = 7.5px
<html>
<head>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
<style>
body{
margin: 0;
padding: 0;
}
.box{
width: 2rem;
height: 2rem;
background: red;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
</script>
</body>
</html>
总结
rem是为了实现移动端自适应布局。通过在html
元素下设置font-size
定义。
另外,手淘的做法是通过判断设备的dpr,将缩放规模scale设置为dpr的倒数,再用js动态设置meta
标签的content
属性和font-size基准值的大小。
网易的做法是,禁用用户缩放,scale始终为1,将font-size设置为625%,即 1rem=100px。
1px问题
如何实现移动端的1px边框
方法一:transformY:scale(50%)
方法二:
border-width:0 0 2px 0;
border-image:url("xxx.png") 0 0 2 0 stretch // 图片地址 上下剪切 左右剪切 上下边宽 左右边宽 图片拉伸
vm/vh+rem大法
vm/vh是未来的趋势
rem方式弊端:需要动态计算根字体大小
做法:用vm/vh来计算根字体大小,剩下的自适应布局依旧按照rem的方法
⭐️关于vm/vh
1. 与%百分比的区别
vm/vh 是基于视窗的
%基于父元素
2. 使用场景
随着页面不同,文字图片缩小放大(适配页面)
3. 与rem的区别
vm/vh没有最大、最小宽大的限制(设备很小的时候,图文会缩得特别特别小……)
措施:
1.解决背景过小问题
body{
min-width:xxx px;
max-width: xxx px;
}
2.媒体查询限制根文字大小(解决文字过小问题)
html { font-size: ($vw_fontsize / ($vw_design / 2)) * 100vw; // 同时,通过Media Queries 限制根元素最大最小值 @media screen and (max-width: 320px) { font-size: 64px; } @media screen and (min-width: 540px) { font-size: 108px; } }
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 如何通过Cloudera Manager页面自定义图表
- 【-Flutter组件篇- 】1.20新增组件InteractiveViewer
- Android使用SoundPool实现播放音效
- 【- FlutterUnit重大更新 -】Flutter要点集录.md
- Android实现美团外卖底部导航栏动画
- Kudu遇到的问题
- 【 -Flutter自定义组件- 】Wrapper组件,包裹装饰你的一切
- Android Shape属性创建环形进度条
- Ranger同步ldap组问题
- Android系统添加自定义鼠标样式通过按键切换实例详解
- Impala MetaData问题
- 聚焦 Android 11: UI 与 Compose
- 如何给Flutter界面切换实现点特效
- 恢复 RecyclerView 的滚动位置
- android实现指纹识别功能