CSS媒体查询使用小结
前言
在实际项目中,总会遇到响应式布局的问题,如果未曾使用一些响应式UI框架的话,那么一般就会用媒体查询来实现响应式布局,由于遇到的实在太频繁了,所以我觉得还是有必要稍微进行一下总结的。
首先我们需要了解到的一点是,使用媒体查询这种方式,当重置浏览器大小的过程中,页面就会根据浏览器的宽度和高度重新渲染页面。
一、关于meta
在使用媒体查询之前,需要先使用<meta>
设置,来兼容移动设备的展示效果,所以首先先简单了解一下关于html中的<metal>
标签。
<meta>
这个标签一般放在head标签里面,用于提供有关某个 HTML 元素的元信息 (meta-information),比如描述、针对搜索引擎的关键词以及刷新频率。
针对媒体查询时设置如下:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
参数说明:
1、name
属性提供了名称/值对中的名称。name="viewport"
表示是对视窗的设置,除了viewport还有。
2、content
属性提供了名称/值对中的值,该值可以是任何有效的字符串,且content基于内容,始终要和 http-equiv
或 name
属性一起使用,为他们提供了与其相关的值的定义。content
的值说明:
width = device-width:宽度等于当前设备的宽度;initial-scale:初始的缩放比例(默认设置为1.0);minimum-scale:允许用户缩放到的最小比例(默认设置为1.0);maximum-scale:允许用户缩放到的最大比例(默认设置为1.0);user-scalable:用户是否可以手动缩放(默认设置为no,因为我们不希望用户放大缩小页面)。
更多关于<meta>
的深入理解,可以参考:http://www.w3school.com.cn/tags/tag_meta.asp
二、媒体查询实现方式
1、直接在link中判读设备的尺寸,然后引用不同的外部css文件。例如:
<link type="text/css" href="media_1.css" media="screen and (min-width: px)">
当屏幕大于400px的时候就引用media_1.css
这个外部的css样式文件。
2、在设置css样式的时候,直接在后面跟着设置@media
。例如:
.div1{width: 400px;height: 400px;
}
/*当屏幕大于1440px的彩色屏幕样式*/
@media screen and (min-width: 1440px){.div1{width: 800px;height:800px;}
}
这是使用CSS3实现的媒体查询,其实媒体查询实质上就是一种样式的覆盖。
三、CSS3 媒体查询
1、基本语法
@media 媒体类型 关键字 and (媒体功能) {/* CSS 样式 */}
2、关键字
only:指定某种指定的媒体类型,可以用来排除不支持媒体查询的浏览器。
not:排除某种指定的媒体类型。
关键字的使用很多时候是用来对那些不支持媒体特性但却支持媒体类型的设备
3、媒体类型
媒体类型描述设备的一般类别,除非使用not或only关键字,否则媒体类型是可选的,并且将隐含使用all类型。
all 适用于所有设备。print 为了加载合适的文档到当前使用的可视窗口. 需要提前咨询 paged media(媒体屏幕尺寸),以满足个别设备网页尺寸不匹配等问题。screen 主要适用于彩色的电脑屏幕。speech 主要应用于屏幕阅读器等发声设备。
所有浏览器都支持值为 “screen”、”print” 以及 “all” 的 media
属性。
4、常用媒体功能
以下仅仅列举了一些可能稍微常用的媒体功能:
height 定义输出设备中的页面可见区域高度。width 定义输出设备中的页面可见区域宽度。max-height 定义输出设备中的页面最大可见区域高度。max-width 定义输出设备中的页面最大可见区域宽度。min-height 定义输出设备中的页面最小可见区域高度。min-width 定义输出设备中的页面最小可见区域宽度。device-height 定义输出设备的屏幕可见高度。 device-width 定义输出设备的屏幕可见宽度。max-device-height 定义输出设备的屏幕可见的最大高度。 max-device-width 定义输出设备的屏幕最大可见宽度。 orientation 检测设备目前处于横向还是纵向状态。
四、针对实际比较常见的尺寸设置
以下仅仅列举了部分常见的屏幕尺寸,但是也实现大于、小于、等于的设置。
/* 屏幕尺寸大于960px时(普通彩色屏幕) */@media only screen and (min-width:960px){ }/* 屏幕尺寸小于1440px时 */@media only screen and (max-width:1440px){ }/* 屏幕尺寸大于960px而小于1920px */@media only screen (min-width: 960px) and (max-width: 1920px){ }/* 屏幕大于2000px时(MAC) */@media only screen and (min-width:2000px){ }/* 当设备可视宽度小于480px (iphone)*/@media only screen and (max-device-width:480px){ }/* 当设备可视宽度等于768px时 (iPad) */@media only screen and (device-width:768px){ }/* 屏幕尺寸大于481px而小于1024px (iPad 竖屏) */@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) { }/* 屏幕尺寸大于481px而小于1024px (iPad横屏) */@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) { }
注意:由于css的样式覆盖问题,所以在实际设置的时候,如果同一个元素需要设置几个不同尺寸的问题,就需要注意一下顺序问题,比如:min-width时,小的放上面大的在下面,同理如果是用max-width那么就是大的在上面,小的在下面。
PS: 本次小结到此结束,如果有不对或者不足的地方,欢迎你的指教,good good study , day day up !
CSS媒体查询使用小结相关推荐
- css媒体查询(手机、平板、PC)
List item css媒体查询 PC端按屏幕尺寸整理? 通过上面的电脑屏蔽及尺寸的例表上我们得到了几个宽度 1024 1280 1366 1440 1680 1920 超小屏幕 手机 (<7 ...
- 响应式开发中合理选定CSS媒体查询分割点
本文响应式开发中合理选定CSS媒体查询分割点翻译自David Gilbertson的The-100%-Correct-Way-To-Do-CSS-breakpoints一文.本文唔看上去有些拗口,不过 ...
- 使用CSS 媒体查询功能满足不同屏幕分辨率要求
http://www.adobe.com/cn/devnet/dreamweaver/articles/dw_html5_pt3.html 这是探索Dreamweaver CS5.5的HTML5和CS ...
- 移动设备响应式网站之CSS媒体查询
http://www.ibm.com/developerworks/cn/web/wa-cssqueries/index.html 简介 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的 ...
- IOS margin失效问题,以及CSS媒体查询区分iPhone 6、 iPhone8、iPhone8 Plus和iPhoneX
CSS媒体查询区分iPhone 6. iPhone8.iPhone8 Plus和iPhoneX /*iPhone6和iPhone8*/ @media only screen and (device-w ...
- css媒体查询的区间_CSS媒体查询
css媒体查询的区间 At-media queries are conditions in your stylesheet. The style rules they contain are appl ...
- CSS媒体查询详细解读
一 CSS媒体查询使用的背景: 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器 ...
- CSS媒体查询:最大宽度或最大高度
本文翻译自:CSS media queries: max-width OR max-height When writing a CSS media query, is there any way yo ...
- media覆盖了css,为什么我的CSS媒体查询被忽略或覆盖?
这让我发疯!我看了一些关于Stackoverflow的问题,发现ID元素的优先级高于类元素(这很高兴知道,但是我感觉这不是我的问题).这是我苦苦挣扎的NAVIGATION菜单.(我使用最大宽度顺便说一 ...
最新文章
- hdu 3666 THE MATRIX PROBLEM
- android studio table居中代码_CSS 之 居中
- 前端学习(2879)歌谣学习篇原生js和canvas实现弹幕功能
- 前端学习(1550):$scope和调试工具
- python编程八年级_8年级Python编程课程期中反思
- c调用python函数_python - Linux C调用Python 函数
- 星巴克推出含萃取后咖啡粉制作的渣渣管;麦咖啡四款新品登陆全国1600家门店;可口可乐业绩恢复至疫情前水平 | 美通企业日报...
- c语言常用图形函数库,easyx安装过程及c语言常用图形库函数全解.ppt
- git 内网搭建_Gitlab搭建内网服务器
- 《MLB棒球创造营》:走近棒球运动·洛杉矶道奇队
- BliBli抢楼全攻略
- 黑盒测试测试用例__判定表
- Centos7 在docker中安装Mysql 8.0 的相关问题
- docker操作时使用https时报错问题解决
- Linux命令之计算器bc
- 点击导航栏切换不同的页面
- ZeroSSL:又一款免费申请SSL证书的利器
- 汉文化资讯社区(maven ,SSM ,MySQL)
- 如何判断合法的立即数
- express应用中ajax结合模板引擎ejs.js渲染页面