物理像素和逻辑像素
如果想搞清楚为什么移动端要适配和1px像素的问题,首先就是要了解为什么会出现这两个问题,这就和物理像素和逻辑像素有关。
物理像素
物理像素是组成相机成像传感器的最基础单元。移动设备出厂时,就具备的分辨率。
逻辑像素
px实际是pixel(像素)的缩写,根据 维基百科的解释,它是图像显示的基本单元,既不是一个确定的物理量,也不是一个点或者小方块,而是一个抽象概念。
DPI
像每英寸长度内的像素点数。DPI(Dots Per Inch,每英寸点数)是一个量度单位,用于点阵数码影像,指每一英寸长度中,取样、可显示或输出点的数目。
小结
简单的说,代码中的px并不能等于所有手机的物理像素,那么就会出现一个问题,1px在不同手机中表现出的样式会不一样,有的用1.5个物理像素来表示1个逻辑像素,其实就是比例为2 ,那么就等于 9个物理像素表示2个逻辑像素,如果比例是2,那么就是4个物理像素表示1个逻辑像素,如果比例是3,那么就是9个物理像素表示1个逻辑像素,大概画个图就更容易理解吧,px并不是最小单位,还可以划分的意思?你懂我意思吧。
那么问题来了,px是一样的,反映到了不同的移动端中,DPI不一样,就导致显示不一样,那么怎么才能适配移动端还有1px是什么问题呢?先说1px,边框的问题,之前说了因为DPI不一样,边框粗细不一样,但是我们就想让它在所有设备上都一样,怎么解决?
1px边框解决最佳方案
如果想解决这个问题:
- 要知道设备的DPI是多少,也就是和像素比例是多少,使用媒体查询
- 第二知道比例怎么更改边框粗细,使用css3中的transform来缩放
- 第三个问题如果直接缩放就会导致不仅仅是边框进行缩放,div或者元素上的所有内容都会缩放,这不是我们要的结果,使用伪元素和定位来解决
- ok 上代码
@mixin border_1px($color) {
position: relative;
@media (-webkit-min-device-pixel-ratio:1.5),
(min-device-pixel-ratio:1.5) {
&::before {
content: " ";
position: absolute;
left: 0px;
top: 0px;
background-color: $color;
transform: scaleY(0.667);
height: 1px;
width: 100%;
}
}
@media (-webkit-min-device-pixel-ratio:2),
(min-device-pixel-ratio:2) {
&::before {
content: " ";
position: absolute;
left: 0px;
top: 0px;
background-color: $color;
transform: scaleY(0.5);
height: 1px;
width: 100%;
}
}
@media (-webkit-min-device-pixel-ratio:3),
(min-device-pixel-ratio:3) {
&::before {
content: " ";
position: absolute;
left: 0px;
top: 0px;
background-color: $color;
transform: scaleY(0.333);
height: 1px;
width: 100%;
}
}
}
<style lang="scss" scoped>
@import "@/assets/style/mixin.scss";
li{
margin: 0 15px;
font-size: 13px;
@include border_1px($width:12px, $height:2px, $left:20px, $top:20px, $color:#D0B969);
}
</style>
直接拿去使用吧,如果需要调整线的位置,直接调整left和top即可
移动端适配
布局方式:
- 流式布局(通过 viewport + flex + px)
- rem布局 (rem 单位)
- 响应式布局 (利用媒体查询,即 media queries,可以针对不同的媒体类型定义不同的样式,从而实现响应式布局)
流式布局
简单理解:屏幕越大,我看的内容越多,内容跟着屏幕大小改变。
流式布局直接写就行了,也就是弹性布局
rem布局
简单理解:屏幕多大,我看的内容都是一样多,内容不跟着屏幕大小改变。
rem需要使用em,rem一些相对单位,推荐使用插件postcss-px-to-viewprot
$npm i -D postcss-px-to-view
配置config.js 这个还是去postcss-px-to-view官网查看比较好
css: {
loaderOptions: {
css: {
},
postcss: {
plugins: [
new pxtovw({
unitToConvert: 'px', //px
viewportWidth: 375, //尺寸
unitPrecision: 5, //精度
propList: ['*'], //指定转换的类名 默认是通配符
viewportUnit: 'vw', //视口单位
fontViewportUnit: 'vw', //字体单位
selectorBlackList: [], //指定不转换的类名
minPixelValue: 1, //最小值 1px
mediaQuery: false, //媒体查询
replace: true, //替换包含vw的规则,而不是添加备用规则。
exclude: [/node_modules/], //除外
})
]
}
}
}
响应式布局
简单理解:和屏幕没关系,你的设备是什么?我先看看你用的什么设备,然后根据你用的设备来调整我内容。
摘抄的一个栗子:
@media all and (min-width:500px) and (max-width:700px) { #box{background:blue }}
@media not all and (min-width:500px) {#box{background:blue}}
@media all not ( orientation:portrait ){ #box{ background:yellow } }
@media all not ( orientation:landscape ){ #box{ background:yellow } }