@media 多媒体查询(响应式布局)

布局方式
table div+css 弹性布局 响应式布局(一个页面适用于多个设备)@media多媒体查询

关键词
only 只有 仅仅
not 没有 除了
and 和连接词

手机尺寸
最小320px 最大750px

iPad 平板
最小641px 最大979px

电脑
980px - 1200px
1200px以上
公式
@media only screen and (min-width: 320px) and (max-width: 640px) {}

1.什么是响应式布局
通过@media多媒体查询实现一个页面适用于多个设备，(智能手机，iPad或平板 pc或者台式机)
2.响应式布局实现方式或响应式布局怎么实现
通过@media多媒体查询实现响应式布局
3.响应式布局优点和缺点
优点：一个页面适用于多个设备
缺点：代码冗余

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
viewport 视口
device-width设置宽度
initial-scale默认缩放
user-scalable 用户缩放