1. 概述

1.1 定义

@media可以针对不同的屏幕尺寸(媒体类型)设置不同的样式,在响应式页面中,@media非常有用。重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。

1.2 使用

  css语法:

@media mediatype and|not|only (media feature) {
CSS-Code;
}

  媒体类型(mediatype)

    • all  —— 所有设备
    • screen —— 用于电脑屏幕,平板电脑,智能手机等。
    • print —— 用于打印机和打印预览。
    • speech —— 应用于屏幕阅读器等发声设备

  媒体功能(media feature)[常用]:

    • max-width  —— 定义输出设备中的页面最大可见区域宽度
    • min-width —— 定义输出设备中的页面最小可见区域宽度。
    • max-height —— 定义输出设备中的页面最大可见区域高度。
    • min-height —— 定义输出设备中的页面最小可见区域高度。
    • orientation —— 定义输出设备中的页面可见区域高度是否大于或等于宽度。
                           有两个值  landscape(横屏) |  portrait(竖屏),portrait:指定输出设备中的页面可见区域高度大于或等于宽度;landscape:除portrait值情况外,都是landscape。

  针对不同的媒体使用不同样式(stylesheets):

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

1.3 实例

  如果文档宽度小于400像素,则设置html跟节点fontsize为30px,页面中的尺寸可使用rem进行处理。

    @media screen and (max-width: 400px) {
html{
font-size: 30px;
}
}

2. 媒体查询尺寸

  说明:项目常用:

    • min-width: 1200px —— 电脑
    • max-width: 1100px —— iPad Pro
    • max-width: 990px —— iPad
    • max-width: 760px —— 手机
    @media screen and (min-width: 1200px) {
html {
font-size: 100px;
}
}
@media screen and (max-width: 1100px) {
html {
font-size: 100px;
}
}
@media screen and (max-width: 990px) {
html {
font-size: 80px;
}
}
@media screen and (max-width: 760px) {
html{
font-size: 30px;
}
}

  

CSS 媒体查询@media的更多相关文章

  1. 巧妙使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的好方法

    有无数的理由要求我们在任何时候都应该知道用户是使用的什么设备浏览我们的网站——宽屏,普通屏,平板,手机?知道这些特征,我们web应用的CSS和JavaScript才能同步做相应的操作.在给Mozill ...

  2. CSS媒体查询(@media)

    @media only screen and (max-width: 500px) { .gridmenu { width:100%; } .gridmain { width:100%; } .gri ...

  3. 我的Vue之旅、04 CSS媒体查询完全指南(Media Quires)

    什么是SCSS Sass: Sass Basics (sass-lang.com) SCSS 是 CSS 的预处理器,它比常规 CSS 更强大. 可以嵌套选择器,更好维护.管理代码. 可以将各种值存储 ...

  4. 使用 CSS 媒体查询创建响应式网站

    简介 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器上有很好的效果,如何在各种大 ...

  5. CSS 媒体查询创建响应式网站

    使用 CSS 媒体查询创建响应式网站  适用于所有屏幕大小的设计 固定宽度的静态网站很快被灵活的响应式设计所取代,该设计可以根据屏幕大小进行上扩和下扩.利用响应式设计,无论您采用什么设备或屏幕来访问网 ...

  6. 纯CSS + 媒体查询实现网页导航特效

    纯css+媒体查询实现网页导航特效 附上效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html lang="en"> <hea ...

  7. CSS3 之媒体查询Media Query

    Media Queries是CSS3有关媒体查询的属性,有了CSS3 之媒体查询Media Queries就可以进行媒体查询,针对每个不同的媒体进行不同的样式编写.传说中的Web响应式布局就可以毫无压 ...

  8. 详解css媒体查询

    简介 媒体查询(Media Queries)早在在css2时代就存在,经过css3的洗礼后变得更加强大bootstrap的响应式特性就是从此而来的. 简单的来讲媒体查询是一种用于修饰css何时起作用的 ...

  9. CSS 媒体查询 响应式

    媒体查询 从 CSS 版本 2 开始,就可以通过媒体类型在 CSS 中获得媒体支持.如果您曾经使用过打印样式表,那么您可能已经使用过媒体类型.清单 1 展示了一个示例. 清单 1. 使用媒体类型 &l ...

随机推荐

  1. vim学习之git for windows

    这是我在博客园的第二篇文章,今晚是在线的特殊日子,应小编的要求不想多讲,喝了点酒,感觉到压力和挑战性,抽了几根烟,现在有点飘飘欲仙的感觉.在长江大学11教的6楼,是长大在线的办公室,这个晚上总是不关灯 ...

  2. SpringBoot 2.0集成spring-data-elasticsearch

    1 资料 https://segmentfault.com/a/1190000015568618 https://github.com/JeffLi1993/springboot-learning-e ...

  3. 23.Secondary Index

    一. Secondary Index(二级索引)1.1. Secondary Index 介绍 • Clustered Index(聚集索引) ◦ 叶子节点存储所有记录(all row data) • ...

  4. hackrf入门

    http://www.hackrf.net/hackrf%E4%B8%8Egnuradio%E5%85%A5%E9%97%A8%E6%8C%87%E5%8D%97/

  5. CSS面试复习(二):CSS的使用

    一.CSS基础 1.选择器 选择器{ 属性:值: 属性:值 } 作用:用于匹配HTML元素.分类和权重.解析方式和性能.值得关注的选择器 分类: 元素选择器a{} 伪元素选择器::before{} 类 ...

  6. 用Nodejs连接MySQL

    转载,原地址:http://blog.fens.me/nodejs-mysql-intro/ 前言 MySQL是一款常用的开源数据库产品,通常也是免费数据库的首选.查了一下NPM列表,发现Nodejs ...

  7. 2017-2018-2 165X 『Java程序设计』课程 团队项目备选题目

    2017-2018-2 165X 『Java程序设计』课程 团队项目备选题目 结合本课程时间安排,以及同学们的专业和课程内容,制定了以下六个题目供各小组选择.如有其他项目方案设想,可自行与老师沟通.老 ...

  8. J - Joyful HDU - 5245 (概率)

    题目链接: J - Joyful  HDU - 5245 题目大意:给你一个n*m的矩阵,然后你有k次涂色机会,然后每一次可以选定当前矩阵的一个子矩阵染色,问你这k次用完之后颜色个数的期望. 具体思路 ...

  9. view类初探(一)

    /*************************************************************************************************** ...

  10. T5557 读写卡详解

    T5557的基本信息就不在这里详细介绍,不了解的可以去看T5557的收据手册. 一上来直接开始讲操作 存在七种操作,我们重点介绍四种,Standard Write,Protected Write,Di ...