這一期教大家如何對不通的分辨率進行適配
我們的電腦分辨率大小不是統一個的分辨率，有的舊的電腦的分辨率很低，有的新電腦分辨率很高，當我們在做界面效果的時候，即使你做了自適應也未未必完全適配屏幕大小，那這個是時候要如何解決這個問題呢？
接下來大家大家介紹幾種方式如何自適應加載文件的方式，絕對的乾貨，喜歡的可以關注哈！
接下來直接上代碼演示
1，根據js判斷屏幕大小分辨率來自動加載對應的css文件
我們首先定義一個函數
function select_size(){
//自動獲取電腦屏幕寬度
var pc_width = document.documentElement.clientWidth;
//自動獲取電腦屏幕高度
var pc_height = document.documentElement.clientHeight;
判斷寬度和高度是否在範圍
if((pc_width==1920)&&(pc_height==1200)){
//大尺寸
$("#css").attr("href","small.css");
$("<link>").attr({
rel: "stylesheet",
type: "text/css",
href: "big.css"
})
.appendTo("head");
//小尺寸
}else if((pc_width==1366)&&(pc_height==900)){
$("#css").attr("href","small.css");
$("<link>").attr({
rel: "stylesheet",
type: "text/css",
href: "small.css"
})
.appendTo("head");
}
}
2.大家也可以使用js來判斷，原生的js語法來判斷
<link>
window.onload=function(){
var pm = document.getElementById("links");
//獲取屏幕的寬度
if(window.screen.width>1024)
{
pm.setAttribute("href","big.css");
}
else{
pm.setAttribute("href","small.css");
}
}
3.使用css自動加載對應文件
//media 是媒體查詢的範圍，判斷屏幕的尺寸大小，這裡引用最大寬度是1920像素
<link>
<link>
4.4.也是使用流媒體自動判斷屏幕大小，這個寫法就是維護比較麻煩
@media only screen and (max-width: 1920px) {
.demo1{
width:50%;
}
.demo2{
width:50%;
}
.demo3 {
width:50%;
}
}
@media only screen and (min-width: 1200px) {
.demo1{
width:100%;
}
.demo2{
width:100%;
}
.demo3 {
width:100%;
}
}
用這幾種方式基本上能夠解決大部分的開發上適配的問題
閱讀更多 OR編程 的文章
關鍵字: 自動 電腦 JavaScript
