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
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！