响应式cssのmedia文件分离

media简介

1.媒体查询,添加自CSS3

2.一个媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成,允许内容的呈现针对一个特定范围的输出设备而进行裁剪,而不必改变内容本身

语法

1.媒体查询包含一个可选的媒体类型和媒体特性表达式(0或多个)最终会被解析为true或false

2.如果媒体查询中指定的媒体类型匹配展示文档所使用的设备类型,并且所有的表达式的值都是true,那么该媒体查询的结果为true

demo

@media (max-width: 600px) {
.sidebar {
display: none;
}
}

逻辑操作符

and

and操作符用来把多个媒体属性组合成一条媒体查询,对成链式的特征进行请求,只有当每个属性都为真时,结果才为真

@media (min-width: 700px) and (orientation: landscape) {
/* Write css 仅在可视区域宽度不小于700像素并在横屏时有效*/
}

逗号分隔列表

媒体查询中使用逗号分隔效果等同于or逻辑操作符。当使用逗号分隔的媒体查询时,如果任何一个媒体查询返回真,样式就是有效的

@media (min-width: 700px), handheld and (orientation: landscape) {
/* 在最小宽度为700像素或是横屏的手持设备上应用一组样式 */
/* orientation: portrait 竖屏 */
}

not

not 关键字应用于整个媒体查询,在媒体查询为假时返回真

not关键字仅能应用于整个查询,而不能单独应用于一个独立的查询

@media not all and (monochrome) {

}

等价于

@media not (all and (monochrome)) {

}

only

防止老旧的浏览器不支持带媒体属性的查询而应用到给定的样式

@media only screen and (color) {

}

媒体查询样式分离

我们不必把所有的媒体查询写到一个css文件中,我们一般这样写


<link rel="stylesheet" href="common.css">
<link media="(min-width: 500px)" rel="stylesheet" href="desktop.css">
<link media="(max-width: 500px)" rel="stylesheet" href="mobile.css">

desktop.css和mobile.css中直接写样式就可以了,不必写查询条件

前端响应式のmedia文件分离的更多相关文章

  1. 前端响应式设计中@media等的相关运用

    现在做前端响应式网站特别,响应式成为现在前端设计一个热点,它成为热点的最主要的原因就是,移动端设备屏幕的种类多样,那么如何设置响应式屏幕. /*打印样式*/ @mediaprint{color:red ...

  2. web前端响应式布局,自适应全部分辨率

    写phpd的我. 近期公司要弄个app关键是没有web开发,而我有比較闲,那就扛枪上阵吧. 响应式布局,web端的?php我一直都是用tp框架,对于web首先想到的是bootstrap框架.仅仅是简单 ...

  3. 15个最好的HTML5前端响应式框架(2014)

    文中的多个框架基于SASS创建,SCSS是一种比LESS更简洁的样式表编程语言,它能够编绎成CSS,可复用CSS代码,声明变量,甚至是函数,类Ruby/Python的语法.參见: LESS vs SA ...

  4. web前端响应式

    一.响应式概述: 不仅仅是通过屏幕尺寸来动态改变页面容器的宽度等,完整的响应式网站的实现需要考虑到这些问题:响应式布局.响应式html和css.响应式媒体.响应式javascript. 二.移动端布局 ...

  5. WEB前端响应式布局之BootStarp使用

    1.Bootstrap简介:1. 概念: 一个前端开发的框架,Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JavaScript 的 ...

  6. web前端----响应式布局

    响应式开发 为什么要进行响应式开发? 随着移动设备的流行,网页设计必须要考虑到移动端的设计.同一个网站为了兼容PC端和移动端显示,就需要进行响应式开发. 什么是响应式? 利用媒体查询,让同一个网站兼容 ...

  7. 前端响应式痛点解决之box-sizing

    前置 在 CSS 盒子模型的默认定义里,你对一个元素所设置的 width 与 height 只会应用到这个元素的内容区.如果这个元素有任何的 border 或 padding ,绘制到屏幕上时的盒子宽 ...

  8. 响应式开发(二)-----Bootstrap框架的介绍

    简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架,是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的, ...

  9. Bootstrap 响应式设计

    本教程讲解如何在网页布局中应用响应式设计.在课程中,您将学到响应式 Web 设计.随着移动设备的普及,如何让用户通过移动设备浏览您的网站获得良好的视觉效果,已经是一个不可避免的问题了.响应式 Web ...

随机推荐

  1. C语言宏定义##连接符和#符的使用(MFC就是靠##自动把消息和消息函数对应起来了,借助宏来减少switch case代码的编写量)

    C语言中如何使用宏C(和C++)中的宏(Macro)属于编译器预处理的范畴,属于编译期概念(而非运行期概念).下面对常遇到的宏的使用问题做了简单总结. 关于#和## 在C语言的宏中,#的功能是将其后面 ...

  2. Qt信号量QSemaphore(在线程里使用,结合生产者消费者的问题)

    Qt中的信号量是由QSemaphore类提供的,信号量可以理解为对互斥量功能的扩展,互斥量只能锁定一次而信号量可以获取多次,它可以用来保护一定数量的同种资源.acquire()函数用于获取n个资源,当 ...

  3. 【Linux】Linux 环境下splite以及一些正则使用

    由于在windows下,遍历目录,想查找满足条件的文件: dir /s > ..\fileresult.txt 结果得到的文件过大,999多MB的txt: split -b 10k date.f ...

  4. abp(net core)+easyui+efcore仓储系统——领域层创建实体(三)

    abp(net core)+easyui+efcore仓储系统目录 abp(net core)+easyui+efcore仓储系统——ABP总体介绍(一) abp(net core)+easyui+e ...

  5. vue-cli3.x npm create projectName 报错: Unexpected end of JSON input while parsing near......

    npm 版本与node版本还有webpack版本之间的问题 清理缓存,“ npm cache clean --force " 一切OK

  6. spring 5.x 系列第8篇 —— 整合Redis客户端 Jedis和Redisson (代码配置方式)

    文章目录 一.说明 1.1 Redis 客户端说明 1.2 Redis可视化软件 1.3 项目结构说明 1.3 依赖说明 二.spring 整合 jedis 2.1 新建基本配置文件和其映射类 2.2 ...

  7. 图片懒加载,Selenium,PhantomJS

    引入 今日概要 图片懒加载 selenium phantomJs 谷歌无头浏览器 知识点回顾 验证码处理流程 今日详情 动态数据加载处理 一.图片懒加载 什么是图片懒加载? 案例分析:抓取站长素材ht ...

  8. django基础知识之定义模板:

    定义模板 模板语言包括 变量 标签 { % 代码块 % } 过滤器 注释{# 代码或html #} 变量 语法: {{ variable }} 当模版引擎遇到一个变量,将计算这个变量,然后将结果输出 ...

  9. find文件删除

    find /root/title/test -type f -name '*.txt' -exec rm {} \;   查找并删除test文件夹下所有txt文件 find /root/title/t ...

  10. dubbo webservice 区别

    DUBBO中可以设置采用webservice方式,进行数据交互. 随着交互系统的增多,这种方式对系统的侵入性越来越大,关系更为错综复杂,很容易出错. 较适用与外围系统通信,若是内部系统间则会出现以上较 ...