浅谈 响应式布局

154 阅读1分钟

响应式布局

同一个网站可以适配多个终端,通俗说就是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来达到响应式效果