一、流式布局

  不再使用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">

posted on 2016-08-04 21:50  爱吃de馒头  阅读(234)  评论(0编辑  收藏  举报