国瑞前端
当前位置: Html5+Css3 > css3响应式布局

响应式布局

一个网站能够兼容多个终端,并且在各个终端都可以很好展示体验。

媒体类型

在何种设备或者软件上将页面打开

1
2
3
4
5
6
7
8
9
all:所有媒体
braille:盲文触觉设备
embossed:盲文打印机
print:手持设备
projection:打印机预览
screen:彩屏设备
speech:'听觉'类似的媒体类型
tty:不适用像素的设备
tv:电视
1
2
3
4
5
6
7
8
9
10
11
12
13
#box{width:100px;height:100px;background-color:red;}
@media embossed{
    /*盲文打印机是绿色*/
    #box{background-color:green;}
}
@media tv{
    /*在tv上是粉色*/
    #box{background-color:pink;}
}
@media all{
    /*在所有媒体上是红色*/
    #box{background-color:red;}
}

关键字

and:连接媒体类型和媒体特性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@media all and (min-width:1201){  }
        not:关键字是用来排除某种制定的媒体类型

@media not tv
        only:只有在特定的某种设备上识别

@media only tv
        媒体特性
        min-width:当屏幕大小 大于等于 某个值的时候识别

        max-width:当屏幕大小 小于等于 某个值的时候识别

        orientation:横竖屏(portrait/landscape)

@media (orientation:portrait) { //竖屏的时候
    div{ background-color: yellow; }
}
@media (orientation:landscape) { //横屏的时候
    div{ background-color: green; }
}

竖屏/横屏检测的原理是通过可视区的宽度和高度之间的比例进行检测的。但在移动端中可能会出现问题,比如点击一个文本输入框的时候,会弹出键盘,这个键盘会影响屏幕可是区域的宽高,这种情况会造成竖屏/横屏检测错误。

样式引入方式

样式表末尾添加

1
@media all and (min-width:600px){  }

link标签

1
<link rel='stylesheet' href='css/01.css' media='all and (min-width:600px)'  />

写在样式表头部

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
    @import url(01.css) (min-width:400px);
    @import url(02.css) (min-width:600px);
    @import url(03.css) (min-width:800px);
    @import url(04.css) (min-width:1000px);
    body{
        margin: 0;
    }
    div{
        height: 100px;
        background-color: #f00;
        border: 1px solid #000;
        box-sizing: border-box;
        float: left;
    }
</style>

https://www.w3.org/2010/05/video/mediaevents.html

常用的几种屏幕宽度设定:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@media screen and (min-width: 1200px) {
    css-code;
}
@media screen and(min-width: 960px) and (max-width: 1199px) {
    css-code;
}
@media screen and(min-width: 768px) and (max-width: 959px) {
    css-code;
}
@media screen and(min-width: 480px) and (max-width: 767px) {
    css-code;
}
@media screen and (max-width: 479px) {
    css-code;
}

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"css3响应式布局"

最新评论

    暂无留言哦~~

博客简介

国瑞个人博客: https://www.huanggr.cn/,我们关注Web前端开发技术,web前端开发,移动前端开发,前端资讯,同时分享前端资源和工具等,期待你的参与,了解更多..

博主独立研发主题:

广告

广告

广告

广告

精彩评论

广告

站点统计

  • 文章总数: 334 篇
  • 草稿数目: 86 篇
  • 分类数目: 28 个
  • 独立页面: 5 个
  • 评论总数: 109 条
  • 链接总数: 10 个
  • 标签总数: 111 个
  • 注册用户: 176 人
  • 访问总量: 8,667,986 次
  • 最近更新: 2021年7月21日
服务热线:
 

 QQ在线交流

 旺旺在线