一.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%}