2移动端与pc端的区别
- 系统
- PC windows/mas(区别不大)
- 移动端 ios/android/windows(有区别)
- 浏览器
- PC(区别很大)
- 移动端(区别不大)
- 分辨率(尺寸)
- PC(有区别)
- 移动端(区别很大)
3设备像素 物理像素
- 屏幕的物理像素,任何设备屏幕的物理像素的数量都是固定的不变的,单位是pt(点)
- 一般指的是手机的分辨率
- 1pt = 1/72英寸(inch)
4屏幕尺寸
- 值得是屏幕对角线的长度
- 注意英寸是长度单位,不是面积单位
- 1英寸 = 2.54厘米(cm)
- 屏幕尺寸=屏幕斜边的像素/ppi
7viewport设置
- width 视口的宽度
- 值为一个正整数或字符串“device-width”(设备的实际的宽度—-css像素)。不建议设置数字(安卓设备有些不支持)
- height 视口的高度
- user-scalable 是否允许用户进行页面缩放
- 值为no或yes
- initial-scale 页面初始缩放值
- 值为一个数字 可以带小数
- minimum-scale 页面最小能够缩放的比例
- maximum-scale 页面最大能够缩放的比例
移动端 配置meta
<meta
name="viewport"
content="width=device-width,initial-scale=1, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
/>
9样式重置
-webkit-user-select:none; 禁止用户选中文字 安卓无用
-webkit-touch-callout:none 禁止长按弹出系统菜单
-wekit-text-size-adjust:100%
-webkit-tap-heighlight-color:rgba0,0,0,1)
-webkit-appearance:none
10适配
适配的元素
- 字体
- 宽高
- 间距
- 图像(图标、图片)
适配的方法
- 百分比适配
- viewport缩放
- DPR缩放
- rem适配
- vw、vh适配
定义meta 的niewport适配
(function () {
// 获取css像素(viewport没有缩放 )
var curWidth = document.documentElement.clientWidth;
var curWidth = window.innerWidth;
var curWidth = window.screen.width;
var targetWidth = 375;
var scale = curWidth / targetWidth;
var view = document.getElementById("view");
view.content = `initial-scale=${scale},minimum-scale=${scale},maximum-scale=${scale},user-scalable=no`;
})();
14em rem
em
作为font-size的单位时,其代表父元素的字体大小,作为其他属性单位时,代表自身字体大小
font-size:20px 1em = 20px
问题:
- chrom下有最小字体限制,必须为12px, 所以这个值不能小于12px
- 如果两个一样的元素,但是里面字体不一样,那就能统一设置了,或者元素字体变化了,就又要统一设置一遍
rem
css3新增的一个相对单位,是相对于根元素字体大小
r root
html{font-size:20px} 2rem = 40px
根据不同的移动设备 设置不同的root font-size
(function (doc, win, designWidth) {
const html = doc.documentElement;
const refreshRem = () => {
const clienWidth = html.clientWidth;
if (clienWidth >= designWidth) {
html.style.fontSize = "100px";
} else {
html.style.fontSize = 100 * (clienWidth / designWidth) + "px";
}
};
doc.addEventListener("DOMContentLoaded", refreshRem);
})(document, window, 750);