前端响应式のmedia文件分离
响应式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文件分离的更多相关文章
- 前端响应式设计中@media等的相关运用
现在做前端响应式网站特别,响应式成为现在前端设计一个热点,它成为热点的最主要的原因就是,移动端设备屏幕的种类多样,那么如何设置响应式屏幕. /*打印样式*/ @mediaprint{color:red ...
- web前端响应式布局,自适应全部分辨率
写phpd的我. 近期公司要弄个app关键是没有web开发,而我有比較闲,那就扛枪上阵吧. 响应式布局,web端的?php我一直都是用tp框架,对于web首先想到的是bootstrap框架.仅仅是简单 ...
- 15个最好的HTML5前端响应式框架(2014)
文中的多个框架基于SASS创建,SCSS是一种比LESS更简洁的样式表编程语言,它能够编绎成CSS,可复用CSS代码,声明变量,甚至是函数,类Ruby/Python的语法.參见: LESS vs SA ...
- web前端响应式
一.响应式概述: 不仅仅是通过屏幕尺寸来动态改变页面容器的宽度等,完整的响应式网站的实现需要考虑到这些问题:响应式布局.响应式html和css.响应式媒体.响应式javascript. 二.移动端布局 ...
- WEB前端响应式布局之BootStarp使用
1.Bootstrap简介:1. 概念: 一个前端开发的框架,Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JavaScript 的 ...
- web前端----响应式布局
响应式开发 为什么要进行响应式开发? 随着移动设备的流行,网页设计必须要考虑到移动端的设计.同一个网站为了兼容PC端和移动端显示,就需要进行响应式开发. 什么是响应式? 利用媒体查询,让同一个网站兼容 ...
- 前端响应式痛点解决之box-sizing
前置 在 CSS 盒子模型的默认定义里,你对一个元素所设置的 width 与 height 只会应用到这个元素的内容区.如果这个元素有任何的 border 或 padding ,绘制到屏幕上时的盒子宽 ...
- 响应式开发(二)-----Bootstrap框架的介绍
简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架,是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的, ...
- Bootstrap 响应式设计
本教程讲解如何在网页布局中应用响应式设计.在课程中,您将学到响应式 Web 设计.随着移动设备的普及,如何让用户通过移动设备浏览您的网站获得良好的视觉效果,已经是一个不可避免的问题了.响应式 Web ...
随机推荐
- How to trim and edit videos in Photos for OS X
Don't let the name fool you, Photos for OS X also stores all your videos. Whether you synced them fr ...
- Delphi Thread.Queue与Synchronize的区别(差别: Synchronize是阻塞,Queue是非阻塞)
前话: 其实大家要学会看源码, 我接下来要说的这些东东,与其等别人讲,还不如自己搞几个代码试一下,印象还深刻点 TThread.Queue和TThread.Synchronize的区别, 效果上:二 ...
- qt中如何用qDebug输出彩色调试信息
原文 http://fanzhichao.blog.hexun.com/22330640_d.html 在终端输出彩色信息有点类似于html的语法,即在要输出的文字前加上转义字符. 指令格式如下\03 ...
- Delphi 10.2 Tokyo的新特性
Delphi 10.2(Tokyo)出来一段时间了,最重要的新特性就是支持Linux的服务端. 官网有详细的介绍: 这里是主要的特性介绍:https://www.embarcadero.com/pro ...
- 附006.Kubernetes RBAC授权
一 RBAC 1.1 RBAC授权 基于角色的访问控制(RBAC)是一种基于个人用户的角色来管理对计算机或网络资源的访问的方法. RBAC使用rbac.authorization.k8s.io API ...
- spring boot 2.x 系列 —— actuator 服务监控与管理
文章目录 一.概念综述 1.1 端点 1.2 启用端点 1.3 暴露端点 1.4 健康检查信息 二.项目说明 1.1 项目结构说明 1.2 主要依赖 1.3 项目配置 1.4 查看监控状态 三.自定义 ...
- NMI watchdog: BUG: soft lockup - CPU#0 stuck for 22s!
今天测试环境一虚拟机运行中突然报错,,, 没见过的内核报错,于是google一番. 系统日志: Nov :: dev- kernel: NMI watchdog: BUG: soft lockup - ...
- java虚拟机-简介
一.什么是JVM JVM是Java Virtual Machine(Java虚拟机)的缩写,JVM是一种用于计算设备的规范,它是一个虚构出来的计算机,是通过在实际的计算机上仿真模拟各种计算机功能来实现 ...
- C# 中的Request对象的应用
QueryString属性:例:页面1:<a href="页面2.aspx?uanme=王华&uage=18">提交</a> ...
- Ajax探讨
Ajax是一种技术方案,并不是什么新技术,Ajax请求使用XmlHttpRequest对象发送, XmlHttpRequest是一个浏览器接口,使得Javascript可以进行HTTP(S)通信. 最 ...