微信小程序-----适配小结、移动端1px与选择器权重

最新推荐文章于 2023-11-30 11:15:49 发布

原创最新推荐文章于 2023-11-30 11:15:49 发布 · 447 阅读

CC 4.0 BY-SA版权

本文总结了微信小程序中的WXSS选择器权重、移动端适配策略，深入探讨了物理像素、设备独立像素、设备像素比等概念，并针对移动端1px线条问题给出了多种解决方案，包括媒体查询、border-image、box-shadow及transform属性的应用。

一、WXSS选择器权重与优先级

在这里插入图片描述
权重越高越优先。在优先级相同的情况下，后设置的样式优先级高于先设置的样式

<!-- WXSS选择器权重与优先级 -->
    <view class="qz" id="qzA" >权重问题</view>

/*  权重优先级 */
/*  权重1 */
view{
  color: red;
}
/*  权重10 */
.qz{
  color:rgb(38, 221, 32);
}
/*  权重11 */
view.qz{
  color:plum;
}
/*  权重100 */
#qzA{
  color:#0000ff;
}
/*  权重101 */
view#qzA{
  color:rgb(29, 185, 233);
}

二、适配小结

在这里插入图片描述

三、物理像素dp

物理像素(physical pixel)又被称为设备像素（device pixel简称dp），他是显示设备中一个最微小的物理部件。

一个设备的物理像素是固定不变的

四、设备独立像素DIP

CSS像素/逻辑像素/设备独立像素/设备无关像素（Device Independent Pixels）。

可以认为是计算机坐标系统中得一个点,这个点代表一个可以由程序使用的虚拟像素(比如: css像素),然后由相关系统转换为物理像素。

五、设备像素比DPR（一个设备的物理像素与逻辑像素之比）

设备像素比-----------Device Pixel Ratio, DPR（全称）

计算：设备像素比 2(dpr)＝物理像素(dp)750 / 逻辑像素375(dip)。

在Retina屏的iphone上，devicePixelRatio的值为2，也就是说1个css像素/逻辑像素相当于2个物理像素。通常所说的二倍屏(retina)的dpr是2, 三倍屏是3。

六、每英寸点数DPI（全称：Dots Per Inch）

每一英寸长度中，取样、可显示或输出点的数目。

是屏幕像素密度ppi（pixel per inch）的单位

七、屏幕像素密度ppi（全称：pixel per inch）

计算：屏幕像素密度(ppi) = 对角线分辨率 / 对角线尺寸

指一个设备表面上存在的像素数量，它通常以每英寸有多少像素来计算。

屏幕像素密度与屏幕尺寸和屏幕分辨率有关，在单一变化条件下，屏幕尺寸越小、分辨率越高。

八、面试题

移动端经典问题：如何在移动端的页面上画一条1px的线？

（1）解析：
在移动端web开发中，UI设计稿中设置边框为1像素，前端在开发过程中如果出现border:1px，测试会发现在某些机型上，1px会比较粗，即是较经典的移动端1px像素问题。

（2）缘由：
为什么会有1px问题？
要处理这个问题，必须先明白知识点，就是设备的物理像素[设备像素] & 逻辑像素[CSS像素]

（3）物理像素：
移动设备出厂时，不同设备自带的不同像素，也称硬件像素。

（4）逻辑像素：
即css中记录的像素，工程师像素。

在开发中，为什么移动端CSS里写了1px，实际上看起来比1px粗？

其实这两个px含义其实是不一样的，UI设计师要求的1px是指设备的物理像素1px，而CSS里记录的像素是逻辑像素，它们之间存在一个比例关系

通常可以用 javascript 中的 window.devicePixelRatio 来获取，也可以用媒体查询的 -webkit-min-device-pixel-ratio 来获取。

在手机上border无法达到我们想要的效果。这是因为 devicePixelRatio 特性导致，iPhone3之后的设备像素比 devicePixelRatio==2，而 border-width: 1px; 描述的是设备独立像素即逻辑像素，所以，border被放大到物理像素2px的物理像素显示，在iPhone上就显得较粗。

解决方案

（1）媒体查询
利用设备像素比缩放，设置小数像素；css与js写法任选其一

①Css写法

.border{
	border:1px solid #ccc;
}
@media screen and (-webkit-min-device-pixel-ratio:2){
	.border{
		border:0.5px solid #ccc;
	}
}
@media screen and (-webkit-min-device-pixel-ratio:3){
	.border{
		border:0.333333px solid #ccc;
	}
}

②JS写法

<body>
	<div id=" main " style=" border:1px solid  #ccc; "></div>
</body>
<script type="text/javascript">
	if(window.devicePixelRatio&&devicePixelRatio >= 2){
		var main = document.getElementById('main');
		main.style.border = ' 0.5px solid #ccc ';
	}
</script>

优点：简单，好理解。
缺点：兼容性差，目前之余IOS8+才支持，在IOS7及其以下、安卓系统都是显示0px。

（2）设置 border-image

通常手机端的页面设计稿都是放大一倍的，如：为适应iphone retina，设计稿会设计成640*960的分辨率，图片按照2倍大小切出来，在手机端看着就不会虚化，非常清晰

.border{
	border:1px 0px;
	-webkit-border-image:url("border.png") 2 0 stretch;
	border-image:url("border.png") 2 0 stretch;
}

border-width： 指定边框的宽度，可以设定四个值,分别
为上右下左border-width: top right bottom left。

border-image： 该例意为：距离图片上方2px（属性值上没有单位）裁剪边框图片作为上边框，下方2px裁剪作为下边框。距离左右0像素裁剪图片即没有边框，以拉伸方式展示

缺点： 需要制作图片，圆角可能出现模糊。代码写起来挺简单，但是要自己制作图片，而且圆角也不好弄，如果改了颜色就要对图片处理，所以不是很好的方案。

（3）利用box-shadow阴影

.border{
	-webkit-box-shadow:0px 1px 1px -1px rgba(0,0,0,.5);
	width:100px;
	height:100px;
}

参数分别表示(box-shadow): 水平阴影位置，垂直阴影位置，模糊距离，阴影尺寸，阴影颜色，将外部阴影改为内部阴影，后四个可选

（4）transform: scale(0.5)------推荐: 很灵活
核心思想是使用transform的scale来整体缩放，如果你想画一条1px的线。就可以直接用

div{
	height:1px;
	background:#ccc;
	transform:scaleY(0.5);
	transform-origin:0 0;
}

（5）媒体查询 + transfrom(方案1的优化)

@media only screen and (-webkit-min-device-pixel-ratio:2.0){
	.border-bottom::after{
		-webkit-transform:scaleY(0.5);
		transform:scaleY(0.5);
	}
}
@media only screen and (-webkit-min-device-pixel-ratio:3.0){
	.border-bottom::after{
		-webkit-transform:scaleY(0.33);
		transform:scaleY(0.33);
	}
}