使用@media媒体查询实现多设备字体图片自适应
来源:互联网 发布:淘宝自动下单软件 编辑:程序博客网 时间:2024/05/17 04:14
<!DOCTYPE html><html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> @media only screen and (min-width: 374px) { html { font-size: 60.5% !important; } } @media only screen and (min-width: 414px) { html { font-size: 62.5% !important; } } @media only screen and (min-width: 480px) { html { font-size: 92.5% !important; } } html { font-size: 62.5%; } #test { font-size: 1.6rem; } </style> <script type="text/javascript"> window.onload = function() { var test = document.getElementById("test"); console.log(getComputedStyle(test).fontSize) } </script> </head> <body> <div id="test">hello</div> </body></html>
@meida可以针对设备类型和媒体特性使用不同的css样式,这里通过改变不同设备的默认字体大小再结合rem就可以实现了。最终不同设备1rem = 设备默认字体大小*不同设备应用的font-size百分比值。
@media 媒体类型and (媒体特性){你的样式}
注意:使用Media Queries必须要使用“@media”开头,然后指定媒体类型(也可以称为设备类型),随后是指定媒体特性(也可以称之为设备特性)。媒体特性的书写方式和样式的书写方式非常相似,主要分为两个部分,第一个部分指的是媒体特性,第二部分为媒体特性所指定的值,而且这两个部分之间使用冒号分隔。
1. 最大宽度max-width
“max-width”是媒体特性中最常用的一个特性,其意思是指媒体类型小于或等于指定的宽度时,样式生效。如:
@media screen and (max-width:480px){ .ads { display:none; }}
上面表示的是:当屏幕小于或等于480px时,页面中的广告区块(.ads)都将被隐藏。
2.最小宽度min-width
“min-width”与“max-width”相反,指的是媒体类型大于或等于指定宽度时,样式生效。
@media screen and (min-width:900px){.wrapper{width: 980px;}}
上面表示的是:当屏幕大于或等于900px时,容器“.wrapper”的宽度为980px。
3.多个媒体特性使用
Media Queries可以使用关键词"and"将多个媒体特性结合在一起。也就是说,一个Media Query中可以包含0到多个表达式,表达式又可以包含0到多个关键字,以及一种媒体类型。
当屏幕在600px~900px之间时,body的背景色渲染为“#f5f5f5”,如下所示。
@media screen and (min-width:600px) and (max-width:900px){ body {background-color:#f5f5f5;}}4. not关键词
使用关键词“not”是用来排除某种制定的媒体类型,也就是用来排除符合表达式的设备。换句话说,not关键词表示对后面的表达式执行取反操作,如:
@media not print and (max-width: 1200px){样式代码}上面代码表示的是:样式代码将被使用在除打印设备和设备宽度小于1200px下所有设备中。
5.only关键词
only用来指定某种特定的媒体类型,可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。其主要有:支持媒体特性的设备,正常调用样式,此时就当only不存在;表示不支持媒体特性但又支持媒体类型的设备,这样就会不读样式,因为其先会读取only而不是screen;另外不支持Media Queries的浏览器,不论是否支持only,样式都不会被采用。
- 使用@media媒体查询实现多设备字体图片自适应
- 巧妙使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的好方法
- CSS3-@media媒体查询使用总结
- CSS媒体查询和flex实现自适应多栏布局
- Media Queries媒体查询
- 媒体查询media
- Media Query媒体查询
- CSS3媒体查询media
- 媒体查询 @Media
- @media媒体查询
- Media 媒体查询
- CSS3--媒体查询@media
- CSS Media媒体查询
- CSS Media媒体查询
- css3 media媒体查询
- css媒体查询 @media
- @media 媒体查询
- @media 媒体查询
- 2693 上学路线(施工)
- 【C++】c++中的继承
- 小波变换和motion信号处理(一)
- 异常:部署在myeclipse 时。jdk版 Unsupported major.minor version 51.0 (unable to load class com.admin.AdminCo
- php 解决undefined function curl_init()问题 64位window
- 使用@media媒体查询实现多设备字体图片自适应
- [Leetcode] #300 Longest Increasing Subsequence
- 判断数组是否为搜索二叉树的后序遍历
- 如何让apache支持.htaccess
- ld链接文件分析
- 微服务框架理解
- NPOI 下载EXCel 学习日记
- spring data mongo 的upsert和update
- opencv函数源码之直方图规定化(1)