文档章节

css3 media媒体查询

小昭归来
 小昭归来
发布于 2016/10/11 13:58
字数 224
阅读 32
收藏 0

语法

@media Media-Type Media-Query (Media-Feature) {
    CSS-Code;
}

Media-Type媒体类型,常见的有all,screen(屏幕),print(打印机)等;

Media-Query媒体查询添加,包括and,not(排除某种媒体),only(限制某种媒体);

Media-Feature媒体特征,常用的是min-width,max-width最小最大判断条件;

###1 最常用的引入方式

link方式

<link rel="stylesheet" type="text/css" href="" media="screen">

@media引入

@media screen {
    
}

###2 媒体特性使用

Max Width

@media screen  and (max-width: 960px){
    //表示当屏幕小于或等于960px的时候,将采用此样式
}

Min Width

@media screen and (min-width: 960px) {
    //表示当大于或等于960px的时候,讲采用此样式
}

多条件

@media screen and (min-width:900px) and (max-width:960px) {
    //表示当位于900~960px区间时,采用此样式
}

上面所说的是浏览器宽度

设备可视区宽度Device Width

@media screen add (max-device-width: 480px) {
    //此样式适用于最大设备宽度为480px
}

© 著作权归作者所有

小昭归来
粉丝 9
博文 44
码字总数 20186
作品 0
成都
程序员
私信 提问
CSS——让这些“展示”有更好的扩展性——媒体查询

前言: 实际上在很早之前,CSS 就支持媒体查询了:例如,页面有些部分需要在打印的时候隐藏或者变大,这时候可以使用 media 使某些 style 只在打印的时候生效。 而 CSS3 的 Media Queries 的...

itsOli
05/14
0
0
【CSS3初探之Media Queries】终于完成了的CSS3,我们来个终章总结!

前言 无论如何,学到这里,我可以自豪的告诉自己,我HTML5与CSS3学完了,不管我现在还记得住多少,我确确实实将他们学完了,还做了不少demo。 回想几个月前,我一直在纠结自己应该学习HTML5...

范大脚脚
2017/12/14
0
0
响应式设计之媒体查询

今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法。 准备工作1:设置Meta标签 首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示效果: 这段代码的几个...

独孤蝈蝈
2016/10/25
21
0
CSS3 响应式布局 Media Queries 媒体查询学习

css3 响应式布局学习 响应式:就是根据不同设备,或者设备不同分辨率,动态给出对应的样式变化 响应不同的设备 涉及到 css 中的 Media Queries ,这个词组被译为 “媒体查询” Media Queries 用法...

一介布衣
2015/09/23
0
0
好程序员web前端技术分享媒体查询

好程序员web前端技术分享媒体查询 什么是媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个...

好程序员IT
05/07
11
0

没有更多内容

加载失败,请刷新页面

加载更多

Mysql的sql_mode模式

sql_mode 是一个很容易被忽视的配置,宽松模式下可能会被输入一些非准确数据,所以生产环境下会要求为严格模式,为了保持生产环境和开发环境,测试环境一致性,我们开发环境和测试环境也要配...

贾峰uk
49分钟前
4
0
Qt程序打包发布方法(使用官方提供的windeployqt工具)

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/toTheUnknown/article/details/81748179 如果使用到了Qt ...

shzwork
今天
7
0
MainThreadSupport

MainThreadSupport EventBus 3.0 中的代码片段. org.greenrobot.eventbus.MainThreadSupport 定义一个接口,并给出默认实现类. 调用者可以在EventBus的构建者中替换该实现. public interface ...

马湖村第九后羿
今天
3
0
指定要使用的形状来代替文字的显示

控制手机键盘弹出的功能只能在ios上实现,安卓是实现不了的,所以安卓只能使用type类型来控制键盘类型,例如你要弹出数字键盘就使用type="number",如果要弹出电话键盘就使用type="tel",但这...

前端老手
今天
8
0
总结:Raft协议

一、Raft协议是什么? 分布式一致性算法。即解决分布式系统中各个副本数据一致性问题。 二、Raft的日志广播过程 发送日志到所有Followers(Raft中将非Leader节点称为Follower)。 Followers收...

浮躁的码农
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部