使用@media怎么实现移动端自适应样式

本篇文章给大家分享的是有关使用@media怎么实现移动端自适应样式,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

通用手机端样式:

@media所有(方向:肖像){
/*竖屏*/
}
@media所有(方向:景观){
/*横屏*/
}

指定手机端高度样式:

@media屏幕和(max-width: 750 px)
@media屏幕和(min-width: 720 px)和(max-width: 960 px) {//720 & lt;=xxx & lt;960年的设备}

根据不同的设备设定的样式:

@media (min-width: 768 px){//祝辞=768的设备}
@media (min-width: 992 px){//祝辞=992的设备}
@media (min-width: 1200){//祝辞=1200的设备}

注意下顺序,如果你把@media (min-width: 768 px)写在了下面那么很悲剧,因为css文件是从上至下读取的,后面的css优先级会更高

@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 (max-width: 1199) {//& lt;=1199的设备}
@media (max-width: 991 px) {//& lt;=991的设备}
@media (max-width: 767 px) {//& lt;=768的设备}
,

附上一个小例子

& lt;风格类型=拔谋?css"在
@media (max-width: 768 px) {
。改变{
高度:100%;
浮动:正确的;
保证金:15 px;
}
}
@media (min-width: 768 px) {
。改变{
显示:没有;
}
}

可以看到根据屏幕尺寸的变化,上面导航栏也随之出现变化,最后导航栏的所有条目都进入到一个右上角的按钮中去了。
这个演示很简单,只是拿来记录一下自己第一个自适应演示

<强>主要注意的语法是:

1, @media (max-width: 768 px) {
CSS代码;
},
//
“max-width极限宽度:768 px”主要表示在此控件宽度小于768 px才执行下列CSS代码代码块,否则就照原本已存在CSS代码执行。
“min-width最小宽度:768 px”主要表示在此控件宽度在大于768 px才执行下列CSS代码块。
2,
col-sm-6 col-md-4 col-lg-3
主要代表了引导栅格系统,分别是对应不同小,中,大屏幕不同的栅格分布(横行别分是2个,4个,3个,最小为1个)
,

以上就是使用@media怎么实现移动端自适应样式,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注行业资讯频道。

使用@media怎么实现移动端自适应样式