响应式布局
同一个网站可以适配多个终端,通俗说就是PC端、手机端网页用一套代码来完成
实现的核心 媒体查询meta
响应式布局实现的方式
1、在头部设置<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
(默认情况下网页最小宽度是980)
2、使用宽度百分比,高度自适应
3、媒体查询在不同的屏幕宽度下设置不同的样式【注意写法和空格】
@media screen and (max-width:400px)
@media screen and (min-width:400px) and (max-width:400px)
补充:版心width通常都是写的固定值,响应式的版心要用max-width来达到响应式效果