时间：2023-09-29 01:18:01 | 来源：网站运营
时间：2023-09-29 01:18:01 来源：网站运营
网页开发常见问题以及解决方案：
在线咨询
<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，也就是设备的物理像素与逻辑像素的比值。.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); }}p { margin: 0; padding: 0; width: 60px; height: 18px; font-size: 12px; overflow: hidden; /*超出盒子隐藏*/ text-overflow: ellipsis; /*文本溢出包含元素时用省略号代替*/ white-space: nowrap; /*文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。*/}/*兼容器较差，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;}关键词：解决,方案
