海阔天空

手机扫码查看

响应式布局

利用媒体查询，即media queries ，可以针对不同的媒体类型定义不同的样式，从而实现响应式布局

媒体类型：
all 用于所有设备
print 用于打印机和打印预览
screen 用于电脑屏幕，平板电脑，智能手机等
speech 应用于屏幕阅读器等发声设备

常规选项：
媒体类型
and、not、min-width、max-width、orientation：portrait竖屏 / landscape横屏、link
<link href=”css.css” media=” all and (min-width:500px)”>

@media all and (max-width:500px){}

常见修改样式
display、float、width
注：响应式代码写到要适配的css后面