時(shí)間：2023-09-29 01:18:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-09-29 01:18:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)
網(wǎng)頁(yè)開發(fā)常見問(wèn)題以及解決方案：
在線咨詢
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/><!-- 代碼解析 --><!-- name="viewport" content="width=device-width" 本頁(yè)面的viewport寬度等于設(shè)備寬度。 initial-scale=1.0, maximum-scale=1.0:初始縮放值和最大的縮放值都是1。 user-scalable=no:禁止用戶進(jìn)行頁(yè)面縮放-->移動(dòng)端window對(duì)象有個(gè)devicePixelRatio屬性，為設(shè)備像素比。drp = window.devicePixelRatio，也就是設(shè)備的物理像素與邏輯像素的比值。.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; /*文本溢出包含元素時(shí)用省略號(hào)代替*/ white-space: nowrap; /*文本不會(huì)換行，文本會(huì)在在同一行上繼續(xù)，直到遇到 <br> 標(biāo)簽為止。*/}/*兼容器較差，webkit內(nèi)核的瀏覽器，或者移動(dòng)端可以使用。*/p { margin: 0; padding: 0; width: 60px; font-size: 12px; display: -webkit-box; /*將對(duì)象作為彈性伸縮盒子模型顯示*/ -webkit-box-orient: vertical; /*設(shè)置或檢索伸縮盒對(duì)象的子元素的排列方式 。設(shè)置子元素在-webkit-box里面按垂直排列*/ -webkit-line-clamp: 2; /*限制在一個(gè)塊元素顯示的文本的行數(shù)。為了實(shí)現(xiàn)效果必須配合display: -webkit-box;-webkit-box-orient；overflow: hidden;*/ overflow: hidden;}/* 根據(jù)高度 / 顯示的行數(shù) = 行高*/.box { /* 只顯示五行 */ height: 100px; line-height: 20px; overflow: hidden;}關(guān)鍵詞：解決,方案
客戶&案例
營(yíng)銷資訊
關(guān)于我們
客戶&案例
營(yíng)銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
