最近更新
阅读排行
关注本站
判断屏幕宽度写入不同样式
阅读：3431 次 编辑日期：2014-01-06
目录：
概述：
在对用户体验越来越看重的今天，960的屏幕宽度对于宽屏的屏幕来说显然看着不够爽，但是如果扩大网页宽度就会造成窄屏幕的浏览器下面会出现滚动条，用户体检很差。
那么我们应该如何根据用户的屏幕宽度适配样式呢？今天我们讲一讲。
为什么需要适配屏幕宽度：
就是为了用户体检，因为宽屏的看960不够爽，窄屏的看1200会出现滚动条，看着很不舒服，所以需要适配，让小于1200宽度的适配960的页面宽度，大于1200的适配1200的页面宽度。
实现方法：
原理很简单，获取屏幕宽度，然后插入不同样式就可以了。
//获取屏幕宽度，检测是否大于1200
var screen_width = document.documentElement.clientWidth > 1200 ? true : false ;
(function(){
//获取head对象
var head = document.getElementsByTagName('HEAD')[0];
//创建link对象
var style = document.createElement('link');
//判断是否大于1200，插入不同样式
if(screen_width){
style.href ='css/bigindex.css';
}else{
style.href ='css/index.css';
}
style.rel = 'stylesheet';
style.type = 'text/css';
//在head对象的最后插入样式
head.appendChild(style);
})()
