学习响应式设计

响应式基础

• 什么是响应式

  • 媒体查询

    不会影响html，只是影响使用css后应用到页面的样式
    常见的媒体查询是询问设备视口角度而不是屏幕宽度。视口是屏幕上显示网站的区域。在pc上，媒体查询会检测窗口内的空间，根据窗口大小变化判断视口变化。在移动设备上，屏幕和视口总是相同的。

媒体查询结构

@media only screen and (min-width:40em){
	body {backgroud-color:blue;}
	}
	"only会让那些老式浏览器忽略整个查询"

在link中使用媒体查询

<link rel ="stylesheet" href="styles/widerscrern.css" media="only screen and (min-width:40em)">

查询什么

屏幕高度与宽度

device-width
device-height

方向

orientation
	landscape 和portrait

宽高比

aspect-ratio   视口宽高比
device-aspect-ratio    设备屏幕宽高比

分辨率

resolution		设备屏幕的分辨率

其他

color   颜色
color-index
monochrome     黑白屏
scan

	需要灵活性：
		各栏的宽度和其他布局元素将以百分比定义，文本则以em定义

• 响应式基础技术

  内容策略

   规划和管理内容的方法
   精简内容
  

  视口

   移动设备上，视口宽度就是屏幕宽度
   默认手机浏览器渲染一个没设置viewport属性网页时，会先像桌面浏览器那样渲染页面，然后按比例缩小适配手机视口
  

<meta name="viewport" content="width=device-width,initial-scale=1">

	initial-scale为缩放因子，意味着页面将按width属性确定宽度来渲染·
	使用user-scalable=no将关闭用户缩放功能
	最大缩放比：maximum-scale，maximum-scale=2将最大为2倍

度量单位

% 包含元素的百分比

em 元素的字体大小

rem 文档的字体大小（即html元素）

px 绝对单位

pt

两列布局

• 浮动

   		当浮动一个块级元素时，其默认宽度指变成了auto，所以要手动设置宽度
  

• 使用网格

   宽度基于百分比，例如：
  

@media only screen and(min-width:36em){
article{width:67%;float:left;margin-right:0;}
aside{width:21%;float:right;margin-left:0;}
footer{clear:both;}
}

• 设置最大宽度

  max-width
  

显示图像

• 显示方式

   img
   	当视口变小，使图像跟随变小，可以把宽度设置为50%
   	添加媒体查询
   		例如在28em时：
  

@media only screen and (max-width:28em) {
	article img{ width:auto;float:none;padding-left:0;}

			使用max-width，当视口宽度过小，同时使图像尽量大，不超过视口宽度，可以使用max-width：100%
	background-image
	
	减少请求数量（css文件、图像）能加快加载速度---使用图像拼合