到底什么是响应式布局,响应式布局如何去写

本文详细介绍了响应式布局的概念及实现方法，包括使用CSS3媒体查询进行屏幕尺寸适配、设置手机响应式视口、实现响应式字体大小、采用百分比宽度布局以及处理响应式图片。

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

即第一个问题--如何解决浏览器的兼容性被我们处理了之后,我们开始学习,如何解决响应式布局,到底什么是响应式布局

其实响应式布局.说的通俗点,就是浏览你写的网站或者说页面的容器不同,大小不同,有人用手机.有人用平板,有人用笔记本电脑,有人用台式.由于你写的代码,在初期

测试的时候,都是根据你的电脑尺寸设计的,所以,当浏览你写的页面的人的电脑和你的不一样时,页面就会发生变化,从而导致页面崩溃.那么我们如何下手呢?

网上关于这个的信息太多.不过其实都一样,我这里也就是做一个整理和总结,让大家理解更简单

其实核心就是我们的css3 媒体查询 @media 不过据说 IE9一下不支持这个东西在网上找了一下有人说引用下面的代码可以实现IE9一下的媒体查询

测试一下打不开啊再看看连接 google的或许你就懂为什么打不开了不过还是先放代码仅作收藏

引用方式如下：

那么下面说说到底如何使用这个@media

第一.先放代码 @media的使用方法

 @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){}

第二,手机响应式==========================================================

注意,一般我们提到的响应式,都和手机离不开那说到手机你就离不开下面的代码

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />    
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="format-detection" content="telephone=yes"/>
<meta name="msapplication-tap-highlight" content="no" />

一般复制最上面的第一行就行了大概啥意思呢就是网页宽度采用设备宽度，缩放比例为1，不允许用户缩放操作，

user-scalable=no表示解决ipad切换横屏之后触摸才能回到具体尺寸的问题。

第三.字体响应式=====================================================

一个响应式的字体应关联它的父容器的宽度，这样才能适应客户端屏幕。

css3引入了新的单位叫做rem,和em类似但对于Html元素，rem更方便使用。

rem是相对于根元素的，不要忘记重置根元素字体大小：

html{font-size:100%;}
完成后，你可以定义响应式字体：
@media (min-width:640px){body{font-size:1rem;}}
@media (min-width:960px){body{font-size:1.2rem;}}
@media (min-width:1200px){body{font-size:1.5rem;}}
不理解rem的童鞋，在这里给大家推荐一篇写的不错的博客(http://www.cnblogs.com/YYvam1288/p/5123272.html)

第四.宽度不固定============================================================

当然一般我们在写大框的时候不会用宽不过如果需要可以用百分比

#head{width:100%;}
#content{width:50%;}

第五.图片响应式===========================================================

1.普通的img

#wrap img{
        max-width:100%;
        height:auto;
    }
    如此设置后ID为wrap内的图片会根据wrap的宽度改变已达到等宽扩充，height为auto的设置是为了保证图片原始的高宽比例，以至于图片不会失真

2.背景图

 #log a{display:block;
            width:100%;
            height:40px;
            text-indent:55rem;
            background-img:url(logo.png);
            background-repeat:no-repeat;
            background-size:100% 100%;
            }
    background-size是css3的新属性，用于设置背景图片的大小，有两个可选值，第一个值用于指定背景图的width,第2个值用于指定背景图的height,如果只指定一个值，那么另一个值默认为auto。
    background-size:cover; 等比扩展图片来填满元素
    background-size:contain; 等比缩小图片来适应元素的尺寸

以上就是关于响应式的问题处理了,其实前端常被问的就这2个,频率高,我在这把它写出来,做一个总结,也是为了方便他人,网络取之网络,用之网络,大家一起学习吧.

最后附赠上一句名言,很受用:不要厌烦熟悉的事物,每天都进步一点;不要畏惧陌生的事物,每天都学习一点;