定义和使用
使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。
当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。
PC端设备屏幕的宽度
页面宽度大于1000px(>=1000)且小于1200px(<=1200)的时候执行下面的CSS(实际刚好“>=1000”或“<=1200”的都执行)
@media screen and (min-width:1000px) and (max-width: 1200px){ .cont_li{ width: 50px; margin-left: 7px; padding-left: 9px; } }
注意以下顺序,如果把@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 (min-width: 768px){ //>=768的设备 } @media (min-width: 992px){ //>=992的设备 } @media (min-width: 1200){ //>=1200的设备 } @media (max-width: 1199){ //<=1199的设备 } @media (max-width: 991px){ //<=991的设备 } @media (max-width: 767px){ //<=768的设备 }
PC屏幕自适应CSS3代码:
/*当页面宽度大于1000px且小于1200px的时候执行,1000-1200*/ @media screen and (min-width:1000px) and (max-width: 1200px){ body{ font-size:16px } } /*当页面宽度大于1280px且小于1366px的时候执行,1280-1366*/ @media screen and (min-width:1280px) and (max-width: 1366px){ body{ font-size:18px } } /*当页面宽度大于1440px且小于1600px的时候执行,1440-1600*/ @media screen and (min-width:1440px) and (max-width:1600px){ body{ font-size:20px } } /*当页面宽度大于1680px且小于1920px的时候执行,1680-1920*/ @media screen and (min-width:1680px) and (max-width:1920px){ body{ font-size:22px } }
电脑屏幕尺寸的例表得到了几个宽度:1024、1200、1280、1366、1440、1600、1680、1920。
移动端设备屏幕的宽度
rem(font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位,em(font size of the element)是指相对于父元素的字体大小的单位。它们之间其实很相似,只不过一个计算的规则是依赖根元素一个是依赖父元素计算。
所以这里总结一句,所谓依赖根元素来计算的方式,就是先给予html元素一个font-size,然后我们所有的rem就根据这个font-size来计算,例如:
html{ font-size:16px;}
那么我们这里的1rem就应该这么来计算:1x16=16px=1rem;
移动端字体:
@media screen and (min-width: 320px) {html{font-size:50px;}} @media screen and (min-width: 360px) {html{font-size:56.25px;}} @media screen and (min-width: 375px) {html{font-size:58.59375px;}} @media screen and (min-width: 400px) {html{font-size:62.5px;}} @media screen and (min-width: 414px) {html{font-size:64.6875px;}} @media screen and (min-width: 440px) {html{font-size:68.75px;}} @media screen and (min-width: 480px) {html{font-size:75px;}} @media screen and (min-width: 520px) {html{font-size:81.25px;}} @media screen and (min-width: 560px) {html{font-size:87.5px;}} @media screen and (min-width: 600px) {html{font-size:93.75px;}} @media screen and (min-width: 640px) {html{font-size:100px;}} @media screen and (min-width: 680px) {html{font-size:106.25px;}} @media screen and (min-width: 720px) {html{font-size:112.5px;}} @media screen and (min-width: 760px) {html{font-size:118.75px;}} @media screen and (min-width: 800px) {html{font-size:125px;}} @media screen and (min-width: 960px) {html{font-size:150px;}}
移动端屏幕自适应CSS3代码:
@media screen and (min-width:320px) and (max-width:360px){ body{ font-size: 12px; } } @media screen and (min-width:360px) and (max-width:390px){ body{ font-size: 13px; } } @media screen and (min-width:390px) and (max-width:460px){ body{ font-size: 14px; } } @media screen and (min-width:320px) and (max-width:460px){ body{ font-size: 12.5px; } }
标签:
@media,响应式适配
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
金钱帮资源网 Copyright www.kbjia.com
暂无“css使用@media响应式适配各种屏幕的方法示例”评论...
更新日志
2024年10月09日
2024年10月09日
- 【原神】V5.0攻略 | 林尼攻略一图流
- 李翊君.1993-相思的烈酒【上华】【WAV+CUE】
- 古巨基.1998-LEO.KU(国)【千禧年代】【WAV+CUE】
- 郭子.2001-原来你什么都不想要创作集丫滚石】【WAV+CUE】
- 《使命召唤:黑色行动6》新预告公布!10月25日发售
- Atlus《暗喻幻想》媒体评分汇总:高分好评如潮!
- 2024金摇杆奖提名揭晓 《黑神话》角逐最佳视觉设计!
- 群星《新说唱2024 第3期 (上)》[320K/MP3][32.76MB]
- 群星《新说唱2024 第3期 (上)》[FLAC/分轨][95.38MB]
- 群星《新说唱2024 第3期 (下)》[320K/MP3][31.36MB]
- 幻兽帕鲁手游什么时候正式上线 最新消息一览
- 西普大陆BOSS位置盘点 解锁天启纪元玩法
- 西普大陆精灵进阶培养攻略 精灵养成指南
- dnf手游法控法系职业哪个强 dnf手游法控法系职业强度排行
- 魔兽世界血藤护目镜图纸在哪买 wlk血藤护目镜图纸购买位置介绍