浏览器分辨率自适配

浏览器自适配

 

js检测屏幕宽度更改cssName

主要用到的两段代码
window.onresize=function(){}; //检测窗口尺寸变化
document.body.clientWidth; //当前屏幕宽度

例子

//检测变化
window.onresize=function(){
	var nowWidth=document.body.clientWidth;
	console.log(nowWidth);
	checkWidth(nowWidth);
};

var mainEle=document.getElementById("main");

function checkWidth(nowWidth){
	if(nowWidth>=990){			
		mainEle.className="";
	}
	else if(nowWidth<990&&nowWidth>=840){	
		mainEle.className="plan1";
	}
	else if(nowWidth<840){			
		mainEle.className="plan2";
	}
}

​

css媒体查询

两种用法：

@media mediatype（媒体设备类型） and|not|only (media feature匹配参数) {
	  CSS-Code;
}

在CSS中写以上代码即可

<link rel="stylesheet" media="mediatype and|not|only 
(media feature)" href="mystylesheet.css">

在HTML中写这段代码即可，它的作用是在不同的分辨率下切换不同的CSS样式文件

all 用于所有设备
print 打印机和打印预览
screen 电脑屏幕，平板，智能手机等
speech 屏幕阅读器等发生设备

示例

示例一：
@media screen and (max- 450px) { //当页面为450px以下时
	body { 
		background-color:black;
	}
}
@media screen and (min- 451px) { //当页面为451px以上时。注意，min和max宽度不能设置相等，除非使用link标签
	body { 
		background-color:black;
	}
}
@media screen and (device- 450px) { //当页面等于450px时
	body { 
		background-color:black;
	}
}
示例二：
<link rel="stylesheet" href="css2.css" 
media="screen and (min-600px) and  (max-900px)">

兼容移动设备的展示效果

页面缩放
meta:vp +Tab键 => 自动生成

<meta name="viewport" content="width=device-width,
initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

width=device-width：宽度等于当前设备的宽度
initial-scale：初始的缩放比例（默认设置为1.0）
maximum-scale：允许用户缩放到的最小比例（默认设置为1.0）
maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
user-scalable：用户是否可以手动缩放（默认设置为no）   //但浏览器允许，这个设置没卵用

解决IE浏览器模式与渲染模式不统一的问题

下面代码意思为ie使用最新渲染，chrome=1意为有chrome优先使用

<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">

兼容旧版浏览器

不推荐使用，建议使用js方法来兼容旧版浏览器，这样更好控制和调整，
详情见笔记：低版本ie兼容处理

//引入js
html5shiv.js     respond.js