css应用@media回应式兼容各种各样显示屏的方式示

日期：2021-02-27 类型：科技新闻 

关键词：公众号小程序，小程序正规价格表，微信群签到小程序，网络抽签小程序，个人做小程序需要什么

界定和应用

应用 @media 查寻，你能够对于不一样的新闻媒体种类界定不一样的款式。

@media 能够对于不一样的显示屏尺寸设定不一样的款式，非常是假如你必须设定设计方案回应式的网页页面，@media 是是非非常有效的。

当你重设访问器尺寸的全过程中，网页页面也会依据访问器的宽度和高宽比再次3D渲染网页页面。

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⑴200*/
@media screen and (min-width:1000px) and (max-width: 1200px){
    body{
        font-size:16px
    }
}
/*当网页页面宽度超过1280px且小于1366px的情况下实行,1280⑴366*/
@media screen and (min-width:1280px) and (max-width: 1366px){
    body{
        font-size:18px
    }
}
/*当网页页面宽度超过1440px且小于1600px的情况下实行,1440⑴600*/
@media screen and (min-width:1440px) and (max-width:1600px){
    body{
        font-size:20px
    }
}
/*当网页页面宽度超过1680px且小于1920px的情况下实行,1680⑴920*/
@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）是指相对根元素的字体样式尺寸的企业。简易的说它便是1个相对性企业。看到rem大伙儿1定会想起em企业，em（font size of the element）是指相对父元素的字体样式尺寸的企业。它们之间实际上很类似，只但是1个测算的标准是依靠根元素1个是依靠父元素测算。

因此这里总结1句，所谓依靠根元向来测算的方法，便是先给予html元素1个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;
    }
}

到此这篇有关css应用@media回应式兼容各种各样显示屏的方式示例的文章内容就详细介绍到这了,更多有关@media回应式兼容显示屏內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容，期待大伙儿之后多多适用脚本制作之家！

上一篇：HTML5 Canvas完成玫瑰花曲线图和心形图案设计的编 返回下一篇：没有了