响应式布局

一.meta标签设置

<meta name ="viewport" content="width=device-width,initial-scale=1.0"  />     页面宽度调整

二.不使用绝对宽度和字体

   1.由于网页会根据屏幕宽度来调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。

   css代码不能指定像素宽度

   只能指定百分比宽度

   或者自动

  2.不使用绝对大小字体：

     字体大小是页面默认大小的100%，即16像素；

     h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）；

    small元素的大小是默认大小的0.875倍，即14像素（14/16=0.875）

三.图片缩放

  1.除了布局和文本，响应式布局还必须实现图片的自动缩放。这只要一行css代码，对于大多数嵌入网页的视频也有效。

   img { max-width:100%}

   img,object{ max-width:100%}