热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

CSS响应式布局之媒体查询

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

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

一、关于meta

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

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

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

参数说明:

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,因为我们不希望用户放大缩小页面)。

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

二、媒体查询实现方式

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

当屏幕大于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社区 其它相关文章!


推荐阅读
  • 深入解析Android Activity生命周期
    本文详细探讨了Android中Activity的生命周期,通过实例代码和详细的步骤说明,帮助开发者更好地理解和掌握Activity各个阶段的行为。 ... [详细]
  • 本文探讨了 Boost 库中的 Program Options 组件,这是一个强大的工具,用于解析命令行参数和配置文件。文章介绍了如何正确设置和使用该组件,包括处理复杂选项和负数值的方法。 ... [详细]
  • 本文通过具体示例详细介绍了 Python 中的装饰器和装饰类的使用方法,包括带参数的装饰器和装饰类的应用场景。 ... [详细]
  • 解决 Pytest 运行时出现 FileNotFoundError 的方法
    在使用 Pytest 进行测试时,可能会遇到 FileNotFoundError 错误,提示无法找到指定的文件或目录。本文将探讨该错误的原因及解决方案。 ... [详细]
  • HDU1085 捕获本·拉登!
    问题描述众所周知,本·拉登是一位臭名昭著的恐怖分子,他已失踪多年。但最近有报道称,他藏匿在中国杭州!虽然他躲在杭州的一个洞穴中不敢外出,但近年来他因无聊而沉迷于数学问题,并声称如果有人能解出他的题目,他就自首。 ... [详细]
  • SpringBoot新手入门指南
    本文旨在为初次接触SpringBoot的开发者提供一份详细的入门指导,包括如何快速搭建并运行一个简单的SpringBoot应用。通过本文,读者将了解Maven项目的构建、必要的配置文件设置以及基本的应用开发流程。 ... [详细]
  • 本视频详细介绍了如何利用J2EE、JBPM 3.x/4.3、Flex流程设计器、jQuery以及授权认证机制构建高效的企业普及版贝斯OA及工作流管理系统。 ... [详细]
  • BL550721、特点液晶驱动输出:Common输出4线,Segment输出36线内置显示寄存器364144bit2线串行接口(SCL,SDA)内置震荡电路内置液晶驱动电源电路13 ... [详细]
  • 本文介绍了如何在Windows操作系统中安装FFTW库,并详细说明了使用Visual Studio 2010进行4096点快速傅里叶变换(FFT)的步骤。包括下载预编译文件、生成库文件以及配置环境等关键环节。 ... [详细]
  • javascript——对象的概念——函数 1 (函数对象的属性和方法)
    一、创建函数函数是一种对象:Function类是对象,可以通过Function实例化一个函数,不过最多的还是利用function来创建函数。方式一:利用Function类来实例化函 ... [详细]
  • IEC60825激光产品安全标准详解
    随着激光技术在全球范围内的广泛应用,尤其是激光投影显示技术的兴起,了解和遵守相关的安全标准变得尤为重要。本文将详细介绍IEC60825激光产品安全标准及其重要性。 ... [详细]
  • Mysqlcheck作为MySQL提供的一个实用工具,主要用于数据库表的维护工作,包括检查、分析、修复及优化等操作。本文将详细介绍如何使用Mysqlcheck工具,并提供一些实践建议。 ... [详细]
  • LIN总线技术详解
    LIN(Local Interconnect Network)总线是一种基于UART/SCI(通用异步收发器/串行接口)的低成本串行通信协议,主要用于汽车车身网络中智能传感器和执行器之间的通信。 ... [详细]
  • Redis: 高效的键值存储系统
    Redis是一款遵循BSD许可的开源高性能键值存储系统,它不仅支持多种数据类型的存储,还提供了数据持久化和复制等功能,显著区别于其他键值缓存解决方案。 ... [详细]
  • 第1章选择流程控制语句1.1顺序结构的基本使用1.1.1顺序结构概述是程序中最简单最基本的流程控制,没有特定的语法结构,按照代码的先后顺序,依次执行,程序中大多数的代码都是这样执行 ... [详细]
author-avatar
幽灵-玲
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有