国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

我在移動(dòng)端上遇到的那些疑難雜癥

warmcheng / 2633人閱讀

摘要:工作一年多了,相信在座的各位前端也都跟我一樣,對(duì)在手機(jī)上,特別是上出現(xiàn)的各種兼容性感到非常頭疼。這篇文章僅作為一份記錄供大家參考。我們可以在這個(gè)代碼的基礎(chǔ)上加上媒體查詢來完善它

工作一年多了,相信在座的各位前端也都跟我一樣,對(duì)在手機(jī)上,特別是iphone上出現(xiàn)的各種兼容性感到非常頭疼。這篇文章僅作為一份記錄供大家參考。
如何畫出 1px 的線?

首先問大家一個(gè)問題,如何在iphone上畫出1px的線?
萌新可能就覺得,這不是很簡(jiǎn)單嗎,看我一把梭:

.line {
    border-top: 1px solid #000
}

當(dāng)然,如果沒有意外的話,設(shè)計(jì)走查的時(shí)候就會(huì)過來跟你說,你這線太粗了,跟設(shè)計(jì)稿上的不一致!

由于每部不同型號(hào)的手機(jī)的DPR都不盡相同,所以同樣是1px在一些手機(jī)上很細(xì),在一些手機(jī)上卻看起來很粗

一個(gè)簡(jiǎn)單的解決方案
.line {
    position: relative;
    &::after {
        position: absolute;
        bottom: 0;
        content: "";
        width: 100%;
        border-top: 1px solid #000;
        transform: scaleY(.5)
    }
}

當(dāng)然了,如果不加以處理,在 DPR1 的屏幕上這條線反而會(huì)很細(xì)。我們可以在這個(gè)代碼的基礎(chǔ)上加上媒體查詢來完善它

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/104532.html

相關(guān)文章

  • 那些年,前端學(xué)習(xí)之路疑難雜癥(四):面試中遇到3個(gè)問題概覽

    摘要:閉包能用來實(shí)現(xiàn)私有化和創(chuàng)建工廠函數(shù)等作用。關(guān)于閉包的常見面試題是這樣的寫一個(gè)函數(shù),循環(huán)一個(gè)整數(shù)數(shù)組,延遲秒打印這個(gè)數(shù)組中每個(gè)元素的索引。 文章來源:http://mp.weixin.qq.com/s/vs0... 前言 在公眾號(hào)上看到了這篇文章,覺得很有用,有助于理解JS學(xué)習(xí)中的一些重點(diǎn)難點(diǎn)。決定把它整理下發(fā)布出來。該文章主要介紹了JS中的三個(gè)問題。在以后的幾篇文章里,我會(huì)詳細(xì)介紹這三...

    gecko23 評(píng)論0 收藏0
  • 那些年,前端學(xué)習(xí)之路疑難雜癥(三):數(shù)組和Date一些梳理

    摘要:將指定的數(shù)字索引值轉(zhuǎn)換成字符串索引值變成,然后將其作為屬性名來用。返回一個(gè)由刪除元素組成的數(shù)組。該方法返回的數(shù)組元素是調(diào)用的數(shù)組的一個(gè)子集。使用的函數(shù)有四個(gè)參數(shù)初始值積累值數(shù)組元素元素索引數(shù)組本身。 前言 很多人在學(xué)習(xí)原生JS的過程中會(huì)遇到一些疑惑,比如在學(xué)習(xí)array時(shí),就很容易搞不清哪些方法會(huì)改變?cè)瓉頂?shù)組,哪些方法不會(huì)改變?cè)瓉頂?shù)組?再比如很多人會(huì)使用new Date()獲取時(shí)間,卻...

    xeblog 評(píng)論0 收藏0
  • Mac聯(lián)機(jī)調(diào)試移動(dòng)端頁面方法 和 移動(dòng)端IOS遇到兼容性問題

    摘要:移動(dòng)端失效需求點(diǎn)擊一個(gè),讓某一個(gè)聚焦并彈出虛擬鍵盤。安卓可以聚焦,但是不會(huì)彈出虛擬鍵盤說明安卓機(jī)的表現(xiàn)也是異常的無法聚焦,也不會(huì)彈出虛擬鍵盤所以我的這邊的實(shí)踐結(jié)論是,如果希望在頁面初始化過程中,讓自動(dòng)聚焦并彈出虛擬鍵盤。 移動(dòng)端IOS遇到的兼容性問題 和 Mac聯(lián)機(jī)調(diào)試方法 有時(shí)候遇到一些移動(dòng)端「疑難雜癥」,因?yàn)橐苿?dòng)端不方便調(diào)試,可能找不到問題點(diǎn),所以經(jīng)常需要電腦端和移動(dòng)端聯(lián)機(jī)調(diào)試,...

    CoreDump 評(píng)論0 收藏0
  • 深入理解js

    摘要:詳解十大常用設(shè)計(jì)模式力薦深度好文深入理解大設(shè)計(jì)模式收集各種疑難雜癥的問題集錦關(guān)于,工作和學(xué)習(xí)過程中遇到過許多問題,也解答過許多別人的問題。介紹了的內(nèi)存管理。 延遲加載 (Lazyload) 三種實(shí)現(xiàn)方式 延遲加載也稱為惰性加載,即在長(zhǎng)網(wǎng)頁中延遲加載圖像。用戶滾動(dòng)到它們之前,視口外的圖像不會(huì)加載。本文詳細(xì)介紹了三種延遲加載的實(shí)現(xiàn)方式。 詳解 Javascript十大常用設(shè)計(jì)模式 力薦~ ...

    caikeal 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<