多套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 {
/ **在此添加小尺寸设备的样式** /
}