响应式布局

最新推荐文章于 2025-05-12 13:02:55 发布

原创最新推荐文章于 2025-05-12 13:02:55 发布 · 192 阅读

CC 4.0 BY-SA版权

文章标签：

本文介绍了响应式布局的概念、实现原理及方法。通过CSS中的MediaQuery功能，根据不同设备宽度执行相应样式，实现移动优先和渐进增强的原则。文章还详细解释了如何设置媒体查询以及响应式图片的具体做法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

是什么：服务器端根据不同的浏览器客户端在浏览器中呈现不同的页面。

原理：通过CSS中Media Query（媒介查询）@media功能，来判断我们的终端设备宽度是多少像素，然后就执行与之对应的CSS样式。

1、移动优先；2、渐进增强；

1、CSS3-Media Query（最简单的方式）

2、借助原生JavaScript（成本高，不推荐使用）

3、第三方开源框架（bootstrap）

1、先写非响应式布局，页面固定宽度大小。

2、再去添加媒体查询（Media Query)和响应式代码。

3、禁止用户来缩放屏幕。不禁止的话，可能在显示上会造成错位，以及显示的不是手机网站的样式。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

media query 是响应式设计的核心，它能够和浏览器进行沟通，告诉浏览器页面如何呈现，假如一个终端的分辨率小于980px，那么可以这样写，这个时候的布局会覆盖掉之前设置的布局。

 @media screen and (max-width:980px){
     #head { … }
     #content { … }
     #footer { … }
}

假如我们要兼容ipad和iphone视图，我们可以这样设置：

/**ipad**/
@media only screen and (min-width:768px)and(max-width:1024px){

}
/**iphone**/
@media only screen and (width:320px)and (width:768px){

}

大图随容器缩放，保持宽高比

max-width：100%；

     #wrap img{
        max-width:100%;
        height:auto;
    }

如此设置后ID为wrap内的图片会根据wrap的宽度改变已达到等宽扩充，height为auto的设置是为了保证图片原始的高宽比例，以至于图片不会失真。