这一期教你如何适应不可用的分辨率。
我们的电脑分辨率不统一，有的老电脑分辨率很低，有的新电脑分辨率很高。我们在做界面效果的时候，即使你做了自适应，也不一定能完全适应屏幕尺寸。那么如何解决这个问题呢？
接下来介绍几种自适应加载文件的方法，绝对干货，喜欢的可以关注一下！
接下来，直接进入代码演示。
1、根据js判断屏幕大小分辨率自动加载相应的css文件。
我们首先定义一个函数。
函数select_size(){
//自动获取计算机屏幕的宽度
var PC _ width = document . documentelement . client width；
//自动获取计算机屏幕的高度
var PC _ height = document . documentelement . client height；
确定宽度和高度是否在范围内。
if((PC _ width = = 1920)&& amp(pc_height==1200)){
//大尺寸
$("#css ")。attr("href "，" ***all . CSS ")；
$(" <链接>；").属性({
rel:“样式表”，
类型:“文本/css”，
href: "big.css "
})
。appendTo(“头”)；
//小尺寸
} else if((PC _ width = = 1366)&& amp(pc_height==900)){
$("#css ")。attr("href "，" ***all . CSS ")；
$(" <链接>；").属性({
rel:“样式表”，
类型:“文本/css”，
href: "***all.css "
})
。appendTo(“头”)；
}
}
2.也可以用js来判断，用原生js语法来判断。
& ltlink rel = " style sheet " type = " text/CSS " href = " a . CSS "/>
& ltscript type = " text/JavaScript " >
window.onload=function(){
var pm = document . getelementbyid(" links ")；
//获取屏幕的宽度
if(window . screen . width >1024)
{
pm.setAttribute("href "，" big . CSS ")；
}
否则{
pm.setAttribute("href "，" ***all . CSS ")；
}
}
& lt/script >
3.使用css自动加载相应的文件
//media是媒体查询的范围，判断屏幕的大小。这里引用的最大宽度是1920像素。
& ltlink rel = " style sheet " type = " text/CSS " href =。/big . CSS " media = " screen and(***x-width:1920 px)"/>
& ltlink rel = " style sheet " type = " text/CSS " href =。/***all . CSS " media = " screen and(min-width:1366 px)"/>
4.4.它还使用流媒体自动判断屏幕大小。这种写法就是维护起来比较麻烦。
@媒体专用屏幕和(最大宽度:1920像素){
.演示1{
宽度:50%；
}
. demo2{
宽度:50%；
}
.演示3 {
宽度:50%；
}
}
@媒体专用屏幕和(最小宽度:1200像素){
.演示1{
宽度:100%；
}
. demo2{
宽度:100%；
}
.演示3 {
宽度:100%；
}
}
这些方式基本可以解决大部分发展适应的问题。
本文来自MR.特别人士投稿，不代表舒华文档立场，如若转载，请注明出处：https://www.chinashuhua.cn/24/478284.html
微信扫一扫 
