响应式布局学习

Sizing Elements

1.em：parent elements的 font size，不设置默认为16px

2.rem 代表 font-size ,不设置默认为16px

3.Percentages：height % width 相对于父本元素

relative to their parent elements on the page
“`
.main {
height: 300px;
width: 500px;
}

.main .subsection {
height: 50%;
width: 50%;
}

Note: Because the box model includes padding, borders, and margins, setting an element's width to 100% may cause content to overflow its parent container. While tempting, 100% should only be used when content will not have padding, border, or margin.

盒模型包括padding,margins,borders.设置100%有可能会超过容器大小

4.Percentages: Padding & Margin 相对于父本width

 calculated based only on the **width** of the parent element.

 Note: When using relative sizing, ems and rems should be used to size text and dimensions on the page related to text size (i.e. padding around text). This creates a consistent layout based on text size. Otherwise, percentages should be used.

 使用相对尺寸，请用em or rem来相对于text size,不然就用百分比

 5.Width: Minimum & Maximum

 硬性控制宽高等
 ```
 p {
  min-width: 300px;
  max-width: 600px;
  min-height: 150px;
  max-height: 300px;
}

6.Scaling Images and Videos

典型图片视频的设计模式

.container {
  width: 50%;
  height: 200px;
  overflow: hidden; //超出的hidden
}

.container img {
  max-width: 100%; //宽度不会价款
  height: auto; //高度随宽度动
  display: block;// 图片默认是inline,这里设置成了block
}

7.Scaling Background Images

背景图片设计模式

body {
  background-image: url('#');
  background-repeat: no-repeat; //图片默认repeat
  background-position: center; //居中
  background-size: cover; // 图片会覆盖整个背景，超出部分不显示
}

Media Queries

@media only screen and (max-width: 480px) {
  body {
    font-size: 12px;
  }
}

//可以两个条件放一起：
media only screen and (min-width: 320px) and (max-width: 480px) {
    /* ruleset for 320px - 480px */
}

为高精度屏幕设计

@media only screen and (min-resolution: 300dpi) {
    /* CSS for high resolution screens */
}
//这个也可以放一起
@media only screen and (max-width: 480px) and (min-resolution: 300dpi) {
    /* CSS ruleset */
}

两个条件满足一个即可：

@media only screen and (min-width: 480px), (orientation: landscape) {
    /* CSS ruleset */
}

为横屏设计：

@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    /* CSS ruleset */
}