成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS3

cnsworder / 830人閱讀

摘要：設(shè)備像素比的分辨率為，個像素等于一個屏幕物理像素的分辨率為蘋果公司便推出了所謂的屏，分辨率提高了一倍，導(dǎo)致同樣大的屏幕上像素多了一倍，安卓設(shè)備上分為等不同的等級對象有一個屬性，官方定義為設(shè)備物理像素和設(shè)備獨立像素的比例，即物理像素獨立像素在

1.?設(shè)備像素比

iphone3的分辨率為320x480，1個css像素等于一個屏幕物理像素

iphone4的分辨率為640x960（蘋果公司便推出了所謂的Retina屏），分辨率提高了一倍，導(dǎo)致同樣大的屏幕上像素多了一倍，安卓設(shè)備上分為ldpi、mdpi、hdpi、xhdpi等不同的等級

window對象有一個devicePixelRatio屬性，官方定義為：設(shè)備物理像素和設(shè)備獨立像素的比例，即 devicePixelRatio = 物理像素 / 獨立像素

在Retina屏的iphone上，devicePixelRatio的值為2，即1個css像素相當(dāng)于2個物理像素

蘋果的iphone6是2倍圖，一般寫代碼時量完尺寸都要除以2

2.?視口

手機(jī)端比較窄，若把PC端的網(wǎng)頁直接放在移動端會無法完全顯示，出現(xiàn)滾動條且字體較大，可以對viewport(視口)進(jìn)行設(shè)置，把網(wǎng)頁縮放在這個視口里，使其在移動端正常顯示。

一般寫移動端或響應(yīng)式時會加上如下代碼：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

快捷鍵：meta:vp+tab鍵

3.?rem和em的區(qū)別

rem 的參照點是html根元素

em 的參照點是定義了字體的父元素（不推薦）

1em=16px ?0.75em=12px

4.?媒體查詢

@media screen and (max-width:768px){
    body{
        width:100%;
        height:100%;
        background-color:red;
    }
}
@media screen and (min-width:768px) and (max-width:1200px){
    body{
        width:100%;
        height:100%;
        background-color:green;
    }
}
@media screen and (min-width:1200px){
    body{
        width:100%;
        height:100%;
        background-color:yellow;
    }
}

5. 伸縮布局

給父元素設(shè)置伸縮盒子 display:flex

給父元素設(shè)置justify-content來調(diào)整主軸方向子元素的對齊方式 ?有flex-start flex-content center space-around 和space-between等屬性

給父元素設(shè)置align-items來調(diào)整側(cè)軸方向子元素的對齊方式 ?有flex-start flex-content center stretch等屬性

flex是設(shè)置子元素在伸縮盒子的父元素里面占據(jù)的份數(shù)

order是設(shè)置子元素在伸縮盒子的父元素里面的排序

flex-direction是調(diào)整主軸和側(cè)軸的方向 默認(rèn)是row 可以改成column

align-self是設(shè)置特殊子元素的排序方式

（未完，晚點更新）

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/2279.html

相關(guān)文章

  • CSS重塑計劃（一）：選擇符

    摘要：重塑計劃一選擇符元素選擇符通配選擇符，選擇所有元素對象。選擇符，以唯一標(biāo)識符屬性等于的對象作為選擇符。選擇具有屬性且屬性值為包含的字符串的元素。偽類選擇符設(shè)置超鏈接在未被訪問前的樣式。僅用于規(guī)則匹配不含有選擇符的元素。 CSS重塑計劃（一）：選擇符 元素選擇符 *通配選擇符(Universal Selector)，選擇所有元素對象。E類型選擇符(Type Selector)，以文檔語言...

    lx1036 評論0 收藏0

  • 前端面試題-漸進(jìn)增強(qiáng)和優(yōu)雅降級

    摘要：一背景介紹漸進(jìn)增強(qiáng)和優(yōu)雅降級這兩個概念是在出現(xiàn)之后火起來的。二概念理解漸進(jìn)增強(qiáng)漸進(jìn)增強(qiáng)一開始就針對低版本瀏覽器進(jìn)行構(gòu)建頁面，完成基本的功能，然后再針對高級瀏覽器進(jìn)行效果交互追加功能達(dá)到更好的體驗。 一、背景介紹 漸進(jìn)增強(qiáng)和優(yōu)雅降級這兩個概念是在 CSS3 出現(xiàn)之后火起來的。由于低級瀏覽器不支持 CSS3，但是 CSS3 特效太優(yōu)秀不忍放棄，所以在高級瀏覽器中使用CSS3，而在低級瀏覽器...

    HollisChuang 評論0 收藏0

  • 雜談：漸進(jìn)增強(qiáng)與優(yōu)雅降級

    摘要：而漸進(jìn)增強(qiáng)和優(yōu)雅降級兩種不同的開發(fā)流程，也是在我們項目初期做調(diào)研選型時會考慮的一個點。二者區(qū)別漸進(jìn)增強(qiáng)和優(yōu)雅降級只是看待同種事物的兩種觀點。漸進(jìn)增強(qiáng)和優(yōu)雅降級都關(guān)注于同一網(wǎng)站在不同設(shè)備里不同瀏覽器下的表現(xiàn)程度。 作為一名前端開發(fā)人員，最頭疼的莫過于瀏覽器兼容。遠(yuǎn)古時期萬惡的IE6，到現(xiàn)在CSS3不兼容的IE7/8.為了保證不同版本瀏覽器都有共同或更優(yōu)化的用戶體驗，前端搬磚的我們不得不與...

    hiyang 評論0 收藏0

  • 雜談：漸進(jìn)增強(qiáng)與優(yōu)雅降級

    摘要：而漸進(jìn)增強(qiáng)和優(yōu)雅降級兩種不同的開發(fā)流程，也是在我們項目初期做調(diào)研選型時會考慮的一個點。二者區(qū)別漸進(jìn)增強(qiáng)和優(yōu)雅降級只是看待同種事物的兩種觀點。漸進(jìn)增強(qiáng)和優(yōu)雅降級都關(guān)注于同一網(wǎng)站在不同設(shè)備里不同瀏覽器下的表現(xiàn)程度。 作為一名前端開發(fā)人員，最頭疼的莫過于瀏覽器兼容。遠(yuǎn)古時期萬惡的IE6，到現(xiàn)在CSS3不兼容的IE7/8.為了保證不同版本瀏覽器都有共同或更優(yōu)化的用戶體驗，前端搬磚的我們不得不與...

    王軍 評論0 收藏0

  • 雜談：漸進(jìn)增強(qiáng)與優(yōu)雅降級

    摘要：而漸進(jìn)增強(qiáng)和優(yōu)雅降級兩種不同的開發(fā)流程，也是在我們項目初期做調(diào)研選型時會考慮的一個點。二者區(qū)別漸進(jìn)增強(qiáng)和優(yōu)雅降級只是看待同種事物的兩種觀點。漸進(jìn)增強(qiáng)和優(yōu)雅降級都關(guān)注于同一網(wǎng)站在不同設(shè)備里不同瀏覽器下的表現(xiàn)程度。 作為一名前端開發(fā)人員，最頭疼的莫過于瀏覽器兼容。遠(yuǎn)古時期萬惡的IE6，到現(xiàn)在CSS3不兼容的IE7/8.為了保證不同版本瀏覽器都有共同或更優(yōu)化的用戶體驗，前端搬磚的我們不得不與...

    SimonMa 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<