介绍
小编给大家分享一下css如何使用@media响应式适配各种屏幕,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!
<强>定义和使用
使用@media查询,你可以针对不同的媒体类型定义不同的样式。
@media可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media是非常有用的。
当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。
<强> PC端设备屏幕的宽度
页面宽度大于1000 px(祝辞=1000)且小于1200 px (& lt;=1200)的时候执行下面的css(实际刚好“祝辞=1000”或“& lt;=1200”的都执行)
@media screen 以及(min-width: 1000像素),以及(max-width: 1200 px) {
,,,.cont_li {
,,,,,,,宽度:,50 px;
,,,,,,,margin-left:, 7 px;
,,,,,,,padding-left:, 9 px;
,,,}
} 注意以下顺序,如果把@media (min-width: 768 px)写在了最下方,那么很悲剧,
@media (min-width: 1200){,//祝辞=1200的设备,}
@media (min-width: 992 px){,//祝辞=992的设备,}
@media (min-width: 768 px){,//祝辞=768的设备,} 这是因为如果屏幕宽度是1440年,由于1440年在768年那么1200就会失效。
所以在使用min-width时,小的在前面,大的在后面;同理,如果使用max-width时,就是大的在前面,小的在后面:
@media (min-width: 768 px){,//祝辞=768的设备,}
@media (min-width: 992 px){,//祝辞=992的设备,}
@media (min-width:, 1200){,//祝辞=1200的设备,}
@media (max-width:, 1199) {,//& lt;=1199的设备,}
@media (max-width: 991 px) {,//& lt;=991的设备,}
@media (max-width: 767 px) {,//& lt;=768的设备,} 电脑屏幕自适应CSS3代码:
/*当页面宽度大于1000 px且小于1200 px的时候执行,1000 - 1200 */@media screen 以及(min-width: 1000像素),以及(max-width: 1200 px) {
,,,身体{
,,,,,,,字体大小:16 px
,,,}
}/*当页面宽度大于1280 px且小于1366 px的时候执行,1280 - 1366 */@media screen 以及(min-width: 1280像素),以及(max-width: 1366 px) {
,,,身体{
,,,,,,,字体大小:18 px
,,,}
}/*当页面宽度大于1440 px且小于1600 px的时候执行,1440 - 1600 */@media screen 以及(min-width: 1440像素),以及(max-width: 1600 px) {
,,,身体{
,,,,,,,字体大小:20 px
,,,}
}/*当页面宽度大于1680 px且小于1920 px的时候执行,1680 - 1920 */@media screen 以及(min-width: 1680像素),以及(max-width: 1920 px) {
,,,身体{
,,,,,,,字体大小:22 px
,,,}
} 电脑屏幕尺寸的例表得到了几个宽度:1024,1200,1280,1366,1440,1600,1680,1920 .
<强>移动端设备屏幕的宽度
rem(根元素的字体大小)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位,em(元素)的字体大小是指相对于父元素的字体大小的单位。它们之间其实很相似,只不过一个计算的规则是依赖根元素一个是依赖父元素计算。
所以这里总结一句,所谓依赖根元素来计算的方式,就是先给予html元素一个字体大小,然后我们所有的rem就根据这个字体大小来计算,例如:
html{,字体大小:16 px;} 那么我们这里的1 rem就应该这么来计算:1乘16=16 px=1 rem;
移动端字体:
@media screen 以及(min-width: 320 px), {html{字体大小:50 px;}}
@media screen 以及(min-width: 360 px), {html{字体大小:56.25 px;}}
@media screen 以及(min-width: 375 px), {html{字体大小:58.59375 px;}}
@media screen 以及(min-width: 400 px), {html{字体大小:62.5 px;}}
@media screen 以及(min-width: 414 px), {html{字体大小:64.6875 px;}}
@media screen 以及(min-width: 440 px), {html{字体大小:68.75 px;}}
@media screen 以及(min-width: 480 px), {html{字体大小:75 px;}}
@media screen 以及(min-width: 520 px), {html{字体大小:81.25 px;}}
@media screen 以及(min-width: 560 px), {html{字体大小:87.5 px;}}
@media screen 以及(min-width: 600 px), {html{字体大小:93.75 px;}}
@media screen 以及(min-width: 640 px), {html{字体大小:100 px;}}
@media screen 以及(min-width: 680 px), {html{字体大小:106.25 px;}}
@media screen 以及(min-width: 720 px), {html{字体大小:112.5 px;}}
@media screen 以及(min-width: 760 px), {html{字体大小:118.75 px;}}
@media screen 以及(min-width: 800 px), {html{字体大小:125 px;}}
@media screen 以及(min-width: 960 px), {html{字体大小:150 px;}}
