搜索
首页web前端css教程CSS响应式布局之媒体查询
CSS响应式布局之媒体查询May 14, 2020 am 10:23 AM
css

CSS响应式布局之媒体查询

在实际项目中,总会遇到响应式布局的问题,如果未曾使用一些响应式UI框架的话,那么一般就会用媒体查询来实现响应式布局,由于遇到的实在太频繁了,所以我觉得还是有必要稍微进行一下总结的。

首先我们需要了解到的一点是,使用媒体查询这种方式,当重置浏览器大小的过程中,页面就会根据浏览器的宽度和高度重新渲染页面。

一、关于meta

在使用媒体查询之前,需要先使用e8e496c15ba93d81f6ea4fe5f55a2244 设置,来兼容移动设备的展示效果,所以首先先简单了解一下关于html中的16a8c94110984f918953ac7222a65798标签。

e8e496c15ba93d81f6ea4fe5f55a2244这个标签一般放在head标签里面,用于提供有关某个 HTML 元素的元信息 (meta-information),比如描述、针对搜索引擎的关键词以及刷新频率。

针对媒体查询时设置如下:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

参数说明:

1、name 属性提供了名称/值对中的名称。name="viewport"表示是对视窗的设置,除了viewport还有。

2、content 属性提供了名称/值对中的值,该值可以是任何有效的字符串,且content基于内容,始终要和 http-equiv 或 name 属性一起使用,为他们提供了与其相关的值的定义。content的值说明:

width = device-width:宽度等于当前设备的宽度;

initial-scale:初始的缩放比例(默认设置为1.0);

minimum-scale:允许用户缩放到的最小比例(默认设置为1.0);

maximum-scale:允许用户缩放到的最大比例(默认设置为1.0);

user-scalable:用户是否可以手动缩放(默认设置为no,因为我们不希望用户放大缩小页面)。

更多关于e8e496c15ba93d81f6ea4fe5f55a2244的深入理解,可以参考:http://www.w3school.com.cn/tags/tag_meta.asp

二、媒体查询实现方式

1、直接在link中判读设备的尺寸,然后引用不同的外部css文件。例如:

<link type="text/css" href="media_1.css" media="screen and (min-width: px)">

当屏幕大于400px的时候就引用media_1.css这个外部的css样式文件。

2、在设置css样式的时候,直接在后面跟着设置@media。例如:

.div1{
    width: 400px;
    height: 400px;
}
/*当屏幕大于1440px的彩色屏幕样式*/
@media screen and (min-width: 1440px){
    .div1{
        width: 800px;
        height:800px;
    }
}

这是使用CSS3实现的媒体查询,其实媒体查询实质上就是一种样式的覆盖。

三、CSS3 媒体查询

1、基本语法

@media  媒体类型  关键字 and (媒体功能) {
        /* CSS 样式 */
    }

2、关键字

only:指定某种指定的媒体类型,可以用来排除不支持媒体查询的浏览器。

not:排除某种指定的媒体类型。

关键字的使用很多时候是用来对那些不支持媒体特性但却支持媒体类型的设备

3、媒体类型

媒体类型描述设备的一般类别,除非使用not或only关键字,否则媒体类型是可选的,并且将隐含使用all类型。

描述
all 用于所有多媒体类型设备
print 用于打印机
screen 用于电脑屏幕,平板,智能手机等。
speech 用于屏幕阅读器

所有浏览器都支持值为 “screen”、”print” 以及 “all” 的 media 属性。

4、常用媒体功能

以下仅仅列举了一些可能稍微常用的媒体功能:

height 定义输出设备中的页面可见区域高度。

width 定义输出设备中的页面可见区域宽度。

max-height 定义输出设备中的页面最大可见区域高度。

max-width 定义输出设备中的页面最大可见区域宽度。

min-height 定义输出设备中的页面最小可见区域高度。

min-width 定义输出设备中的页面最小可见区域宽度。

device-height 定义输出设备的屏幕可见高度。 

device-width 定义输出设备的屏幕可见宽度。

max-device-height 定义输出设备的屏幕可见的最大高度。 

max-device-width 定义输出设备的屏幕最大可见宽度。 

orientation 检测设备目前处于横向还是纵向状态。

四、针对实际比较常见的尺寸设置

以下仅仅列举了部分常见的屏幕尺寸,但是也实现大于、小于、等于的设置。

    /* 屏幕尺寸大于960px时(普通彩色屏幕) */
    @media only screen and (min-width:960px){ }
    /* 屏幕尺寸小于1440px时 */
    @media only screen and (max-width:1440px){ }
    /* 屏幕尺寸大于960px而小于1920px */
    @media only screen  (min-width: 960px) and (max-width: 1920px){ }
    /* 屏幕大于2000px时(MAC) */
    @media only screen and (min-width:2000px){ }
    /*  当设备可视宽度小于480px (iphone)*/
    @media only screen and (max-device-width:480px){ }
    /* 当设备可视宽度等于768px时 (iPad) */
    @media only screen and (device-width:768px){ }
    /* 屏幕尺寸大于481px而小于1024px (iPad 竖屏) */
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) { }
    /* 屏幕尺寸大于481px而小于1024px (iPad横屏) */
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) { }

注意:由于css的样式覆盖问题,所以在实际设置的时候,如果同一个元素需要设置几个不同尺寸的问题,就需要注意一下顺序问题,比如:min-width时,小的放上面大的在下面,同理如果是用max-width那么就是大的在上面,小的在下面。

推荐教程:《CSS教程

以上是CSS响应式布局之媒体查询的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文转载于:CSDN。如有侵权,请联系admin@php.cn删除
利用CSS怎么创建渐变色边框?5种方法分享利用CSS怎么创建渐变色边框?5种方法分享Oct 13, 2021 am 10:19 AM

利用CSS怎么创建渐变色边框?下面本篇文章给大家分享CSS实现渐变色边框的5种方法,希望对大家有所帮助!

css ul标签怎么去掉圆点css ul标签怎么去掉圆点Apr 25, 2022 pm 05:55 PM

在css中,可用list-style-type属性来去掉ul的圆点标记,语法为“ul{list-style-type:none}”;list-style-type属性可设置列表项标记的类型,当值为“none”可不定义标记,也可去除已有标记。

css与xml的区别是什么css与xml的区别是什么Apr 24, 2022 am 11:21 AM

区别是:css是层叠样式表单,是将样式信息与网页内容分离的一种标记语言,主要用来设计网页的样式,还可以对网页各元素进行格式化;xml是可扩展标记语言,是一种数据存储语言,用于使用简单的标记描述数据,将文档分成许多部件并对这些部件加以标识。

css3怎么实现鼠标隐藏效果css3怎么实现鼠标隐藏效果Apr 27, 2022 pm 05:20 PM

在css中,可以利用cursor属性实现鼠标隐藏效果,该属性用于定义鼠标指针放在一个元素边界范围内时所用的光标形状,当属性值设置为none时,就可以实现鼠标隐藏效果,语法为“元素{cursor:none}”。

css怎么实现英文小写转为大写css怎么实现英文小写转为大写Apr 25, 2022 pm 06:35 PM

转换方法:1、给英文元素添加“text-transform: uppercase;”样式,可将所有的英文字母都变成大写;2、给英文元素添加“text-transform:capitalize;”样式,可将英文文本中每个单词的首字母变为大写。

rtl在css是什么意思rtl在css是什么意思Apr 24, 2022 am 11:07 AM

在css中,rtl是“right-to-left”的缩写,是从右往左的意思,指的是内联内容从右往左依次排布,是direction属性的一个属性值;该属性规定了文本的方向和书写方向,语法为“元素{direction:rtl}”。

css怎么设置i不是斜体css怎么设置i不是斜体Apr 20, 2022 am 10:36 AM

在css中,可以利用“font-style”属性设置i元素不是斜体样式,该属性用于指定文本的字体样式,当属性值设置为“normal”时,会显示元素的标准字体样式,语法为“i元素{font-style:normal}”。

怎么设置rotate在css3的旋转中心点怎么设置rotate在css3的旋转中心点Apr 24, 2022 am 10:50 AM

在css3中,可以用“transform-origin”属性设置rotate的旋转中心点,该属性可更改转换元素的位置,第一个参数设置x轴的旋转位置,第二个参数设置y轴旋转位置,语法为“transform-origin:x轴位置 y轴位置”。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
1 个月前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

功能强大的PHP集成开发环境