响应式布局

最新推荐文章于 2023-09-26 22:47:59 发布

changyijie

最新推荐文章于 2023-09-26 22:47:59 发布

阅读量348

点赞数 4

文章标签：响应式

本文链接：https://blog.csdn.net/changyijie/article/details/50389392

版权

响应式布局简介

由于移动互联网的快速发展，为了能给不同终端的用户提供更加舒适的界面和更好的用户体验，人们提出了响应式布局。

响应式布局优缺点

优点：

能够适应多屏幕

缺点

代码太繁杂，
兼容各种设备工作量大，效率较低
（不过呢作为码农嘛就是得打繁杂的代码啊这样才能秃头。。。）

媒介查询标签

实现响应式布局用到的是css3中的媒体查询标签（Media Query)。
Media Query能够获取的值：
设备的宽和高device-width，device-height显示屏幕/触觉设备。
渲染窗口的宽和高width，height显示屏幕/触觉设备。
设备的手持方向，横向还是竖向orientation（portrait|lanscape）和打印机等。
画面比例aspect-ratio点阵打印机等。
设备比例device-aspect-ratio-点阵打印机等。
对象颜色或颜色列表color，color-index显示屏幕。
设备的分辨率resolution。

用法和结构

在css中的结构：一般是@media(min-width: 宽度){
body{…..}
header{…..}
}
例：

@media(min-width: 996px){
    body{
        background:red;
    }
}
@media screen and (max-width: 996px) and (min-width: 461px){
    body{
        background:blue;
    }
}
@media(max-width:460px){
    body{
        background:yellow;
        }
}

对代码理解：
1、@media(min-width: 996px)—当屏幕宽度为>=996px时使用{}里面的内容html页面的body的背景颜色为红色；
2、@media screen and (max-width: 996px) and (min-width: 461px)—当屏幕宽度为大于461px并且小于996px时使用{}里面的内容html页面的body的背景颜色为蓝色；
3、@media(max-width:460px)—当屏幕宽度为小于461px时使用{}里面的内容html页面的body的背景颜色为黄色；

如何让页面缩小时流畅缩小：

在缩小过程中为了更流畅我们一律适用百分比来计算内边距和外边距；这里有个公式：目标的宽度÷目标上下文的宽度=百分比宽度
例：


<div id="top">
    <input type="text" name="user">
</div>

css样式：

@media(min-width: 996px){
    #top{
        width:500px;
        height:200px;
    }
    input{
        width:30%;
        height:30px;
    }
}

在上面案例中如果我们给input的width设置为150px，那么我们就找input的上下文—也就是div（id=top）的元素，所以得到的百分比宽度为：150/500=0.3也就是30%；这样input的宽度就会随着窗口的宽度进行缓速变化；

字体的变化

最好也用百分比也就是把之前习惯用的px换成em。不过在此之前要对字进行默认操作；浏览器字体一般默认为16px；所以在写之前要在body里面设置字体默认大小，然后用目标字体的大小÷默认字体大小（16px）；
例：

<p>我是代码</p>

css样式：

body{font-size:16px;}
@media(min-width: 996px){
    p{
        font-size:0.75em;
    }
}

现在如果我要让上面的p标签的文字变为12px的字体，那么就让12/16得到百分比；

弹性图片

实现图片随着流动布局相应缩放非常简单。只需在 CSS
中作如下声明：

img{
    max-width:100%;
}

这样就可以使图片自动缩放到与其容器 100%匹配。更进一步，可以将同样的样式应用到
其他多媒体标签上。如：

img,object,video,embed {
max-width: 100%;
}

这些多媒体元素都可以自动缩放了。
需要注意的是： 不能再img标签中设置图片的大小，那样就不能根据浏览器缩放进行缩放。
例：

<img src="images/1.jpg"  width="50" height="50" id="img">

css样式：

#img{
max-width: 100%;
}

像上面这样图片就不会改变，只是宽50 高50；

兼容性问题

因为手机的屏幕比较小，所以很多手机浏览器会自动缩小页面，好让有限的屏幕上尽量展示完整的内容。但是对于响应式布局来说，展示内容已经不成问题，所以就要禁用浏览器的这一功能。

我们在使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果：
在页面的头部之间加上下面这句∶

<meta name=“viewport” content=“width=device-width; initial-scale=1.0”>

　　meta viewport这个属性是在移动设备上设置原始大小显示和是否缩放的声明。

　　参数设置∶

　　width – viewport的宽度

　　height – viewport的高度

　　initial-scale – 初始的缩放比例

　　minimum-scale – 允许用户缩放到的最小比例

　　maximum-scale – 允许用户缩放到的最大比例

　　user-scalable – 用户是否可以手动缩放

　　因为IE8既不支持HTML5也不支持CSS3 Media，所以我们需要加载两个JS文件，来保证我们的代码实现兼容效果：：

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->