html中分辨率的适配问题,浏览器分辨率自适配

浏览器自适配

js检测屏幕宽度更改cssName

主要用到的两段代码

window.οnresize=function(){}; //检测窗口尺寸变化

document.body.clientWidth; //当前屏幕宽度

例子

//检测变化

window.οnresize=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中写以上代码即可

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

all 用于所有设备

print 打印机和打印预览

screen 电脑屏幕，平板，智能手机等

speech 屏幕阅读器等发生设备

示例

示例一：

@media screen and (max-width: 450px) { //当页面为450px以下时

body {

background-color:black;

}

}

@media screen and (min-width: 451px) { //当页面为451px以上时。注意，min和max宽度不能设置相等，除非使用link标签

body {

background-color:black;

}

}

@media screen and (device-width: 450px) { //当页面等于450px时

body {

background-color:black;

}

}

示例二：

media="screen and (min-width:600px) and (max-width:900px)">

兼容移动设备的展示效果

页面缩放

meta:vp +Tab键 => 自动生成

width=device-width：宽度等于当前设备的宽度

initial-scale：初始的缩放比例(默认设置为1.0)

maximum-scale：允许用户缩放到的最小比例(默认设置为1.0)

maximum-scale：允许用户缩放到的最大比例(默认设置为1.0)

user-scalable：用户是否可以手动缩放(默认设置为no) //但浏览器允许，这个设置没卵用

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

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

兼容旧版浏览器

不推荐使用，建议使用js方法来兼容旧版浏览器，这样更好控制和调整，

详情见笔记：低版本ie兼容处理

//引入js

html5shiv.js respond.js