响应式布局

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

媒体类型

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

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;
}

css3响应式布局教程—css3响应式的更多相关文章

  1. html响应式布局,css响应式布局,响应式布局入门

    html响应式布局,css响应式布局,响应式布局入门 >>>>>>>>>>>>>>>>>>& ...

  2. 响应式布局(CSS3弹性盒flex布局模型)

    传统的布局方式都是基于盒模型的 利用display.position.float来布局有一定局限性 比如说实现自适应垂直居中 随着响应式布局的流行,CSS3引入了更加灵活的弹性布局模型 flex弹性布 ...

  3. 移动端响应式布局--你不知道的CSS3.0媒体查询,解决rem部分情况下无法适配的场景

    媒体查询作为响应式布局的方法之一,实际项目中用途也很广.但是你真的知道怎么用吗? 例如,下面匹配 iphone6/7/8 屏幕 @media screen and (max-width: 375px) ...

  4. HTML5入门教程:响应式页面布局

    摘自:https://www.sohu.com/a/225633935_647584 随着互联网时代的发展,我们对网页布局有了新的要求,大气,美观,能够在不同的设备上呈现令人焕然一新的效果.此时,一个 ...

  5. 一步步开发自己的博客 .NET版 剧终篇(6、响应式布局 和 自定义样式)

    前言 这次开发的博客主要功能或特点:    第一:可以兼容各终端,特别是手机端.    第二:到时会用到大量html5,炫啊.    第三:导入博客园的精华文章,并做分类.(不要封我)    第四:做 ...

  6. 移动Web之响应式布局的探讨

    响应式布局的探讨 响应式布局的两种方式 基于百分比的布局 例:Bootstrap 基于rem的布局 例:淘宝触屏版 这两种布局都需要依赖于CSS3的media query来设置布局断点(或者通过js监 ...

  7. HTML5学习总结-番外05 响应式布局

    1. 响应式布局 响应式布局是2015年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的.其目的是为用户提欧共更加 ...

  8. 移动web之响应式布局

    1.响应式布局的概念 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念.简而言之.就是一个站点可以兼容多个终端--而不是为每一个终端做一个特定的版本号. 这个概念是为解决移动互 ...

  9. Bootstrap响应式布局介绍

    一.响应式布局 1.什么是响应式网页 2.响应式网页必须做到的几件事 1.布局,使用流式布局(默认文档流+浮动)+弹性布局+栅格布局 2.文字和图片大小随着容器大小改变 3.媒体查询技术(css3) ...

随机推荐

  1. Numpy | 11 迭代数组

    NumPy 迭代器对象 numpy.nditer 提供了一种灵活访问一个或者多个数组元素的方式. 迭代器最基本的任务的可以完成对数组元素的访问. 实例1:使用 arange() 函数创建一个 2x3 ...

  2. 【概率DP】$P2059$ 卡牌游戏

    链接 题目描述 N个人坐成一圈玩游戏.一开始我们把所有玩家按顺时针从1到N编号.首先第一回合是玩家1作为庄家.每个回合庄家都会随机(即按相等的概率)从卡牌堆里选择一张卡片,假设卡片上的数字为X,则庄家 ...

  3. linux下 调试C#代码

    参考两位大神的帖子: https://blog.csdn.net/soband_xiang/article/details/82914195 https://blog.csdn.net/weixin_ ...

  4. shell 四则运算

    test.sh #/bin/bash read -p "请输入第一个数:" a read -p "请输入第二个数:" b if [ $a -gt $b ] th ...

  5. 【POJ1426】Find The Multiple

    本题传送门 本题知识点:深度优先搜索 | 宽度优先搜索 题意很简单,让我们找一个只有1和0组成的十位数是n的倍数的数. 这题一开始吓到我了--因为Output里说输出的长度最长不超过100位???那是 ...

  6. Android开发:文本控件详解——TextView(二)文字跑马灯效果实现

    一.需要使用的属性: 1.android:ellipsize 作用:若文字过长,控制该控件如何显示. 对于同样的文字“Android开发:文本控件详解——TextView(二)文字跑马灯效果实现”,不 ...

  7. WPF——OXY绘图_old

    plotModel = new PlotModel() { Title = "数据统计", LegendTitle = "Max:红色,Min:黄色", Leg ...

  8. 真机调试No target device的解决(android studio)3.4.1

    驱动等都正常,手机连接正常.但是还是报错 搜索到如下办法成功解决:adb未启动或启动失败,这时候选择android studio界面底端的logcat,会自动重启adb.

  9. mysql 大小写不敏感

    lower-case-table-names=1 变量lower-case-table-names的取值 取值范围有三个,分别是0.1.2. 1. 设置成0:表名按你写的SQL大小写存储,大写就大写小 ...

  10. HIVE出现Read past end of RLE integer from compressed stream Stream for column 1 kind LENGTH position: 359 length: 359 range: 0错误

    错误日志 Diagnostic Messages for this Task: Error: java.io.IOException: java.io.IOException: java.io.EOF ...