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

資訊專欄INFORMATION COLUMN

CSS3

cnsworder / 793人閱讀

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

1.?設備像素比

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

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

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

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

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

2.?視口

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

一般寫移動端或響應式時會加上如下代碼：

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

快捷鍵：meta:vp+tab鍵

3.?rem和em的區別

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. 伸縮布局

給父元素設置伸縮盒子 display:flex

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

給父元素設置align-items來調整側軸方向子元素的對齊方式 ?有flex-start flex-content center stretch等屬性

flex是設置子元素在伸縮盒子的父元素里面占據的份數

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

flex-direction是調整主軸和側軸的方向 默認是row 可以改成column

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

（未完，晚點更新）

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/2279.html

相關文章

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

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

    lx1036 評論0 收藏0

  • 前端面試題-漸進增強和優雅降級

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

    HollisChuang 評論0 收藏0

  • 雜談：漸進增強與優雅降級

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

    hiyang 評論0 收藏0

  • 雜談：漸進增強與優雅降級

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

    王軍 評論0 收藏0

  • 雜談：漸進增強與優雅降級

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

    SimonMa 評論0 收藏0

發表評論

0條評論

cnsworder

男|高級講師

TA的文章

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