响应式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中直接写样式就可以了,不必写查询条件

转载于:https://www.cnblogs.com/guangzan/p/11236672.html

前端响应式のmedia文件分离相关推荐

web前端响应式布局,自适应全部分辨率
写phpd的我. 近期公司要弄个app关键是没有web开发,而我有比較闲,那就扛枪上阵吧. 响应式布局,web端的?php我一直都是用tp框架,对于web首先想到的是bootstrap框架.仅仅是简单 ...
15个最好的HTML5前端响应式框架(2014)
文中的多个框架基于SASS创建,SCSS是一种比LESS更简洁的样式表编程语言,它能够编绎成CSS,可复用CSS代码,声明变量,甚至是函数,类Ruby/Python的语法.參见: LESS vs SA ...
响应式html5框架,15个最好的HTML5前端响应式框架(2014)
注1* 之前我们比较过Foundation和Bootstrap, 这篇文章更加系统地介绍了目前比较浏览的前端响应式框架. 注2* 文中的多个框架基于SASS创建,SCSS是一种比LESS更简洁的样式表 ...
Vue 项目前端响应式布局及框架搭建
Vue 项目前端响应式布局及框架搭建一.flexible 插件 1.引用 flexible 插件 2.修改 flexible 默认配置 3.展示效果二.cssrem 插件 (px -> re ...
【Vue】Vue 项目前端响应式布局及框架搭建
文章目录 Vue 项目前端响应式布局及框架搭建一.项目基本结构二.项目分辨率响应式创建 1.flexible.js 2.引用 flexible 插件 3.修改 flexible 默认配置 4.cs ...
前端响应式布局原理与方案（详细版）
引言响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局.传统的开发方式是PC端开发一套,手机端再开发一套,而使用响应式布局只要开发一套就够,缺点就是CSS比较重.下面是博客网站对不同设备适配后的结 ...
前端基础7：a标签常用方法和元素居中方式，响应式@media
a标签 a标签作用锚点语法:href="#+指定位置" a标签href属性的属性值为相应要跳转到的元素id属性名前加# <a href="#top"& ...
php前端响应式框架,响应式css前端框架有哪些
响应式css前端框架有:1.Semantic UI Framework:2.Less Framework:3.Foundation Framework:4.UIkit Framework:5.YUI ...
WEB前端响应式布局之BootStarp使用
1.Bootstrap简介: 1. 概念: 一个前端开发的框架,Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JavaScript ...
前端响应式/自适应/流动布局
文章目录 1. 控制视口(viewport) 2. 媒体查询 2.1 媒体类型 2.2 媒体特征 2.3 逻辑条件 2.4 使用媒体查询设置断点 3. 图片的自适应 4 自适应图片等素材 5 不使用绝 ...

前端响应式のmedia文件分离

media简介

语法

逻辑操作符

and

逗号分隔列表

not

only

媒体查询样式分离

前端响应式のmedia文件分离相关推荐

最新文章

热门文章