PC端、移动端、平板的适应CSS写法(媒体查询)

1,800 阅读1分钟

多套CSS

1. 1200px 或以上被视为笔记本电脑和台式机尺寸。

2. 768px 到 1024px 被认为是平板尺寸。

3. 767px 或以下被视为移动设备尺寸。

PC端

            body{

                background:yellow;

            }

 @media screen and (min-width:767px) and (max-width:1024px){

            body{

                background:yellow;

            }

   }//平板

@media screen and (max-width:767px) {

            body{

                background:yellow;

            }

}//移动端

@media screen and (max-width:750px) {

            body{

                background:yellow;

            }

}//移动端

@media screen and (max-width:480px) {

            body{

                background:yellow;

            }

}//移动端

//移动端最后三个都是可以的,主要看你自己怎么写

针对PC端的适配,uniapp也提供了相应的API。例如,可以通过uni.getSystemInfoSync()获取到设备的屏幕宽高,然后根据宽高比例进行样式的调整。

例如,以下代码将对设备的宽度进行判断,从而选择不同的样式表:

let systemInfo = uni.getSystemInfoSync();

if (systemInfo.windowWidth >= 992) {

/ **在此添加大尺寸设备的样式** /

} else {

/ **在此添加小尺寸设备的样式** /

}