关于响应式布局,你必须要知道关于响应式布局的几件事(3)

2019-10-16 22:31:11 来源:互联网作者:浪里行舟 人气: 次阅读 536 条评论

文章主要介绍了你必须要知道关于响应式布局的几件事,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧。一、前言响应式Web设计可以让一个网站同时...

五、流式布局

百分比布局也叫作流式布局、弹性盒布局。手机网页没有版心,都左右撑满。
百分比能够设置的属性是width、height、padding、margin。其他属性比如border、font-size不能用百分比设置的。

  • 如果用百分比写width,那么指的是父元素width的百分之多少。
  • 如果用百分比写height,那么指的是父元素height的百分之多少。
  • 如果用百分比写padding,那么指的是父元素width的百分之多少,无论是水平的padding还是竖直的padding。
  • 如果用百分比写margin,那么指的是父元素width的百分之多少,无论是水平的margin还是竖直的margin。
  • 不能用百分比写border的宽度

接下来我们看一个例子:

div{
    width:200px;
    height:300px;
    padding:10px;
}
div p{
    width:50%;
    height:50%;
    padding:10%;   
}
此时p的真实宽度是多少?

此时p的真实宽度是140px*190px

六、媒体查询

1.为什么响应式 Web 设计需要媒体查询

CSS3媒体查询可以让我们针对特定的设备能力或条件为网页应用特定的CSS样式。如果没有媒体查询,光用CSS是无法大大修改网页外观的。这个模块让我们可以提前编写出适应很多不可预测因素的CSS规则,比如屏幕方向水平或垂直、视口或大或小等等。弹性布局虽然可以让设计适应较多场景,也包括某些尺寸的屏幕,但有时候确实不够用,因为我们还需要对布局进行更细致的调整。媒体查询让这一切成为可能,它就相当于CSS中基本的条件逻辑。

2.媒体查询语法

我们在媒体查询外面写的第一条规则,是“基本的”样式,它适用于任何设备。在此基础上,我们再为不同视口、不同能力的设备,渐进增加不同的视觉效果和功能。

body {
    background-color: grey;
 } 
@media screen and (min-width:1200px){
    body{
        background-color: pink;
    }
}
 @media screen and (min-width:700px) and (max-width:1200px){
    body{
    background-color: blue;
    }
}
@media screen and (max-width:700px){
    body{
    background-color: orange;
        }
}

其中@media就表示媒体查询,查询现在看这个网页的设备是什么,以及它的宽度是多少。screen表示看这个网页的设备是显示器,而不是残疾人听力设备、也不是打印机。后面用and符号罗列所有的可能性。

值得注意:媒体查询只能包裹选择器,不能包裹k:v对儿。
IE6、7、8不支持媒体查询,也为了防止手机端的某些浏览器不支持媒体查询,所以不要把所有的选择器都放在媒体查询里面。

您可能感兴趣的文章

相关文章