搜索
首页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技巧cohost.org丢失的CSS技巧cohost.orgApr 25, 2025 am 09:51 AM

在这篇文章中,布莱克·莫里(Blackle Mori)向您展示了一些骇客,同时试图推动同位HTML支持的极限。如果您敢于使用这些,以免您也被标记为CSS罪犯。

光标的下一个CSS样式光标的下一个CSS样式Apr 23, 2025 am 11:04 AM

具有CSS的自定义光标很棒,但是我们可以将JavaScript提升到一个新的水平。使用JavaScript,我们可以在光标状态之间过渡,将动态文本放置在光标中,应用复杂的动画并应用过滤器。

世界碰撞:使用样式查询的钥匙帧碰撞检测世界碰撞:使用样式查询的钥匙帧碰撞检测Apr 23, 2025 am 10:42 AM

互动CSS动画和元素相互启动的元素在2025年似乎更合理。虽然不需要在CSS中实施乒乓球,但CSS的灵活性和力量的增加,可以怀疑Lee&Aver Lee&Aver Lee有一天将是一场

使用CSS背景过滤器进行UI效果使用CSS背景过滤器进行UI效果Apr 23, 2025 am 10:20 AM

有关利用CSS背景滤波器属性来样式用户界面的提示和技巧。您将学习如何在多个元素之间进行背景过滤器,并将它们与其他CSS图形效果集成在一起以创建精心设计的设计。

微笑吗?微笑吗?Apr 23, 2025 am 09:57 AM

好吧,事实证明,SVG的内置动画功能从未按计划进行弃用。当然,CSS和JavaScript具有承载负载的能力,但是很高兴知道Smil并没有像以前那样死在水中

'漂亮”在情人眼中'漂亮”在情人眼中Apr 23, 2025 am 09:40 AM

是的,让#039;跳上文字包装:Safari Technology Preview In Pretty Landing!但是请注意,它与在铬浏览器中的工作方式不同。

CSS-tricks编年史XLIIICSS-tricks编年史XLIIIApr 23, 2025 am 09:35 AM

此CSS-tricks更新了,重点介绍了年鉴,最近的播客出现,新的CSS计数器指南以及增加了几位新作者,这些新作者贡献了有价值的内容。

tailwind的@Apply功能比听起来更好tailwind的@Apply功能比听起来更好Apr 23, 2025 am 09:23 AM

在大多数情况下,人们展示了@Apply的@Apply功能,其中包括Tailwind的单个property实用程序之一(会改变单个CSS声明)。当以这种方式展示时,@Apply听起来似乎很有希望。如此明显

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脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具