大家好，我是考100分的小小码 ，祝大家学习进步，加薪顺利呀。今天说一说广州蓝景分享—网页开发中常见问题及解决方案[通俗易懂],希望您对编程的造诣更进一步.
1. 移动端 1px
移动端 1px 变粗的原因
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<!-- 代码解析 -->
<!--
name="viewport" content="width=device-width" 本页面的viewport宽度等于设备宽度。
initial-scale=1.0, maximum-scale=1.0:初始缩放值和最大的缩放值都是1。
user-scalable=no:禁止用户进行页面缩放
-->移动端 window 对象有个 devicePixelRatio 属性，为设备像素比。
drp = window.devicePixelRatio，也就是设备的物理像素与逻辑像素的比值。
以 iphone6 为例 它的物理像素是 750，逻辑像素为 375 ，所以 iphone6 的 drp = 2 。
所以 css 里面写的 1px 宽度映射到物理像素上就有 2px。
解决方案
一、使用小数来写 px 值
在 ios8+ 中当 drp = 2 的时候使用 0.5px ，使用媒体查询
.border {
border: 1px solid #999;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.border {
border: 0.5px solid #999;
}
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
.border {
border: 0.333333px solid #999;
}
}二、:before, :after 与 transform
//所有边框
.mx-1px {
position: relative;
}
.mx-1px:before {
position: absolute;
content: '';
width: 100%;
height: 100%;
border: 1px solid #ccc;
border-radius: 0;
top: 0;
left: 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
box-sizing: border-box;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.mx-1px:before {
width: 200%;
height: 200%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
}
//上边框
.mx-1px-top {
position: relative;
}
.mx-1px-top:before {
position: absolute;
content: '';
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
width: 100%;
height: 1px;
border-top: 1px solid #ccc;
top: 0;
left: 0;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.mx-1px-top:before {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
//下边框
.mx-1px-bottom {
position: relative;
}
.mx-1px-bottom:before {
position: absolute;
content: '';
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
width: 100%;
height: 1px;
bottom: -1px;
border-bottom: 1px solid #ccc;
left: 0;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.mx-1px-bottom:before {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}2.单文本和多文本溢出处理
2.1 单文本溢出
p {
margin: 0;
padding: 0;
width: 60px;
height: 18px;
font-size: 12px;
overflow: hidden; /*超出盒子隐藏*/
text-overflow: ellipsis; /*文本溢出包含元素时用省略号代替*/
white-space: nowrap; /*文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。*/
}2.2 多文本溢出
/*兼容器较差，webkit内核的浏览器，或者移动端可以使用。*/
p {
margin: 0;
padding: 0;
width: 60px;
font-size: 12px;
display: -webkit-box; /*将对象作为弹性伸缩盒子模型显示*/
-webkit-box-orient: vertical; /*设置或检索伸缩盒对象的子元素的排列方式 。设置子元素在-webkit-box里面按垂直排列*/
-webkit-line-clamp: 2; /*限制在一个块元素显示的文本的行数。为了实现效果必须配合display: -webkit-box;-webkit-box-orient；overflow: hidden;*/
overflow: hidden;
}
/* 根据高度 / 显示的行数 = 行高*/
.box {
/* 只显示五行 */
height: 100px;
line-height: 20px;
overflow: hidden;
}想要学习更多前端技术，可以关注“广州蓝景”微信公众号 进行详细的了解。想看什么内容也可以在评论区留言哟
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
转载请注明出处: https://daima100.com/12083.html
