了解@media与@media screen
在互联网的通知的今天,在移动端充斥我们生活的今天, 做一个自适应的网站是我们不二的选择,那么我们就学会不同屏幕下的布局,那么我们就必须了解@media与@media screen
了解Media Queries
Media Queries,其作用就是允许添加表达式用以媒体查询,以此来选择不同的样式表,从而自动适应不同的屏幕分辨率。
css2里面虽然支持@media属性,但是能实现的功能比较少,一般只用做打印的时候做特殊定义的CSS,我们不去讨论。
css3的@media属性在CSS3里面已经演变成一种 media queries(媒体查询/匹配)了,在CSS3里面,可以用查询语句来匹配各种类型的屏幕。
@media与@media screen区别
@media screen的css在打印设备里是无效的,而@media在打印设备里是有效的,如果css需要用在打印设备里,那么就用@media ,否则,就用@media screen。
不过这只是笼统的做法,其实如果把“screen”换为“print”,写为@media print,那么该css就可用到打印设备上了,但要注意,@media print声明的css只能在打印设备上有效。
Media Queries工作方式:
在media属性里:
● screen 是媒体类型里的一种,CSS2.1定义了10种媒体类型
● and 被称为关键字,其他关键字还包括 not(排除某种设备),only(限定某种设备)
● (min-width: 400px) 就是媒体特性,其被放置在一对圆括号中。完整的特性参看 相关的Media features部分
1、种是直接在link中判断设备的尺寸,然后引用不同的css文件:
意思是当屏幕的宽度大于等于400px的时候,应用styleA.css
“`
“`
意思是当屏幕的宽度大于600小于800时,应用styleB.css
2、另一种方式,即是直接写在 style 标签里:
@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时,应用下面的CSS样式*/
.class {
background: #ccc;
}
}
写法是前面加@media,其它跟link里的media属性相同。
Media使用说明举例
1、前端响应式布局最出名的框架莫过于 Bootstrap
下面我们看看min-width来确认分别是768、992、1200。当然了过去也有些设备宽度是600 480的,哪些小分辨率的我们都归类为小于767的。为什么是小于767而不是768呢,那是因为在css中@media (min-width: 768px)表示最小是768也就是>=768,这里有等于,所以我们判断更小的设备用@media (max-width: 767px)这边表示<=767就不会有冲突了。
/* 小屏幕(平板,大于等于 768px) */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕(桌面显示器,大于等于 992px) */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕(大桌面显示器,大于等于 1200px) */
@media (min-width: @screen-lg-min) { ... }
2、自适应代码
@media (min-width: 768px){ //>=768的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 1200){ //>=1200的设备 }
注意下顺序,如果你把@media (min-width: 768px)写在了下面那么就是错误的!!!
@media (min-width: 1200){ //>=1200的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 768px){ //>=768的设备 }
因为如果是1440,由于1440>768那么你的1200就会失效。
所以我们用min-width时,小的放上面大的在下面,同理如果是用max-width那么就是大的在上面,小的在下面
@media (max-width: 1199){ //<=1199的设备 }
@media (max-width: 991px){ //<=991的设备 }
@media (max-width: 767px){ //<=768的设备 }
3、高级的混合应用
@media screen and (min-width:1200px){}
@media screen and (min-width: 960px) and (max-width: 1199px) { }
@media screen and (min-width: 768px) and (max-width: 959px) { }
@media only screen and (min-width: 480px) and (max-width: 767px){ }
@media only screen and (max-width: 479px) { }
/* Large desktop */
@media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
/* Landscape phones and down */
@media (max-width: 480px) { ... }
基于视窗宽度的媒体查询断点设置
前提设置body的字体为100%。其具有一个简单的计算公式:100% = 16px = 1em = 14pt
/*Viewport = 1920px*/
@media screen and (max-width: 120em){}
/*Viewport = 1680px*/
@media screen and (max-width: 105em){}
/*Viewport = 1400px*/
@media screen and (max-width: 87.5em){}
/*Viewport = 1200px*/
@media screen and (max-width: 75em){}
/*Viewport = 1024px*/
@media screen and (max-width: 64em){}
/*Viewport = 960px*/
@media screen and (max-width: 60em){}
/*Viewport = 800px*/
@media screen and (max-width : 50em){}
/*Viewport = 768px*/
@media screen and (max-width : 48em){}
/*Viewport = 600px*/
@media screen and (max-width: 37.5em){}
/*Viewport = 480px*/
@media screen and (max-width: 30em){}
/*Viewport = 320px*/
@media screen and (max-width: 20em){}
/*Viewport = 240px*/
@media screen and (max-width: 15em){}
/*
High Resolution/Retina Display Media Queries
*/
/*Pixel Density 3*/
@media(-webkit-min-device-pixel-ratio: 3),(min-resolution: 192dpi){}
/*Pixel Density 2*/
@media(-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){}
/*Pixel Density 1.5*/
@media(-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 124.8dpi){}
/*Pixel Density 1.25*/
@media(-webkit-min-device-pixel-ratio: 1.25),(min-resolution: 120dpi){}
/*
Printed Style Media Queries
*/
/*Print Resolution 300 dpi*/
@media print and (min-resolution: 300dpi){}
/*Print Resolution 144 dpi*/
@media print and (min-resolution:144dpi){}
/*Print Resolution 96 dpi*/
@media print and (min-resolution:96dpi){}
/*Print Resolution 72 dpi*/
@media print and (resolution:72dpi){}
http://www.taodudu.cc/news/show-6706349.html
相关文章:
- Disasters_on_social_media
- 社交媒介收集 (Social Media)
- Social media users of the world unite!
- 什么是social media?
- 基于卷积神经网络和时域金字塔池化的语音情感分析
- 语音情感分析开发者必读之作,一定带来一个解决新方案
- 论文笔记:Gazetteer-Enhanced Attentive Neural Networks for Named Entity Recognition
- 【损失函数】Keras Loss Function
- 说话人识别中的数据需求
- 语音情感识别领域-论文阅读笔记1:融合语音和文字的句段级别情感识别技术
- 阅读笔记 MISA: Modality-Invariant and -Specific Representations for Multimodal Sentiment Analysis
- 多模态情感识别-MISA: baseline解读
- 柏林情感语料库(Emo-DB)Berlin Emotional Database 介绍
- js 文字转语音 api SpeechSynthesisUtterance
- DL-Paper精读:LSTM + Transformer 架构模型
- 论文笔记:语音情感识别(五)语音特征集之eGeMAPS,ComParE,09IS,BoAW
- 这个星期一直在努力的——微博系统
- 基于B/S的即时通讯微博系统
- java毕业设计——基于java+SSM+Oracle的微博系统设计与实现(毕业论文+程序源码)——微博系统
- PHP最新我约微博整站系统源码+功能非常多
- 安装部署 Mastodon 长毛象去中心化微博系统
- 基于SSM框架的BS架构微博系统
- 微博客系统
- 安卓系统分享到qq、微信、微博
- 微博系统架构
- web微博系统(前端)
- 把img放在div里面
- JS应该放在什么位置?
- git clone下来的代码放在哪里,如何放在指定路径
- 为什么要把js放在页面底部,css放在顶部
了解@media与@media screen相关推荐
- CSS的@media与@media screen,媒体查询
在网站自适应设计中,@media与@media screen是经常会用到的css代码,其功能就是为不同的媒体设置不同的css样式,这里的"媒体"包括页面尺寸,设备屏幕尺寸等. @m ...
- 在html样式@media,css样式里面的@media与@media screen的区别
在网站自适应设计中,@media与@media screen是必须用到的css代码,可能大家对此并不陌生.但是大家又知不知道@media与@media screen的区别在哪呢?在自适应设计中你是 ...
- 响应式web之@media screen
两个概念:媒体类型(Media Type)和 媒体特性(Media Query) Media Type:我们常碰到的就是all(全部),screen(屏幕),print(页面打印或打邱预览模式) Me ...
- 201509280825_《css3——media query整理2》
1.Smartphones (竖板和横板) @media only screen and (min-device-width : 320px) and (max-device-width : 480p ...
- 如何为CSS指定对应的Media type
One of the most important features of style sheets is that they specify how a document is to be pres ...
- CSS3 @media媒体查询 适配不同尺寸设备的响应式布局(清晰详解)
随着宽屏的不断普及,CSS3出现了@media媒体查询技术 一.了解@Media 相关知识 1.了解Media Queries Media Queries能在不同的条件下使用不同的样式,使页面在不同在 ...
- CSS3 Media Queries 详细介绍与使用方法,Responsive Web Design 必备技术, 响应式设计
上一篇我们介绍了Responsive Web Design之后,这次要来详细介绍CSS3 Media Queries了. 在上一篇中,我们提到Responsive Web Desig n的实作方式有大 ...
- CSS media queries
最近在做一些页面打印时的特殊处理接触到了media queries,想系统学习一下,在MOZILLA DEVELOPER NETWORK看到一篇文章讲的很不错,结合自己的使用总结一下. CSS2/me ...
- django 1.8 官方文档翻译:5-2-2 表单素材 ( Media 类)
表单素材 ( Media 类) 渲染有吸引力的.易于使用的web表单不仅仅需要HTML – 同时也需要CSS样式表,并且,如果你打算使用奇妙的web2.0组件,你也需要在每个页面包含一些JavaScr ...
最新文章
- CentOS 7 网页加载速度慢的解决办法
- 网游运营基础知识与专业术语
- 【GDKOI2003】最大公共子串
- 分享篇--esp32直连天猫精灵
- [渝粤教育] 西南科技大学 形式逻辑 在线考试复习资料
- PHP在程序处理过程中动态输出内容
- 计算机一级考试word题主要,2017年计算机一级考试word题及答案
- 位数问题(信息学奥赛一本通-T1313)
- java充血模型orm框架,关于领域驱动设计和贫血、失血、充血模型
- 计算机应用设计的目的意义,高等教育自学考试计算机及应用专业+本科毕业设计(论文)的目的与要求...
- qt文件怎么设置全局变量_QT编程之——使用全局变量
- 从零搭建自己的SpringBoot后台框架(十三)
- fedora 23 vlc 以root运行的方法
- O2OA开源企业办公开发平台:使用Vue-CLI开发O2应用
- CDN学习笔记二(技术详解)
- 4G-LTE技术总结
- Linux CPU超频设置
- 深圳再当特区,引爆AI万亿市场;阿里·TTS语音合成模型;美团·AI数据库异常监测系统;面向后端开发者的CS课程;前沿论文 | ShowMeAI资讯日报
- wireshark打开cap抓包文件不能显示中文
- Windows 2D 绘图 (GDI, GDI+, Direct2D)