CSS3--響應式布局


一、流式布局

  不再使用px作為盒模型布局,而是采用百分比布局寬高,定位等。

  公式:目標元素寬度/上下文元素寬度=百分比寬度

     目標定位/上下文元素寬度或高度=定位距離(保留5位小數點)

  用em/rem來替換px

    1、em的值並不是固定的;

    2、em會繼承父級元素的字體大小。

    3、rem為css新增屬性,全稱root em(root指html元素)

  彈性圖片大小

    圖片設置width:100%,或者background-size:100% 100%。

    圖片設置閾值:max-width

二、響應式布局

  根據不同屏幕分辨率使用不同的樣式和布局結構

  媒體查詢

    @media 設備名 only (選取條件) not (選取條件)and (設備選取條件),設備二{sRules}

    <link rel="stylesheet" type="text/css" media="only screen and (max-width:480px)" href="link.css">


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



css 響應式布局 css 響應式布局 CSS3--彈性布局flexbox CSS之響應式布局 CSS之響應式布局 css響應式布局 css - 布局 - 響應式布局 用CSS實現響應式布局 css3響應式布局 響應式布局css寫法
 
粤ICP备14056181号  © 2014-2021 ITdaan.com