响应式手机网站要点

Posted 2020-08-03 X_Zed

CSS3里面很多地方浏览器不兼容，需要我们根据浏览器的内核添加前缀:
火狐浏览器 -moz-
谷歌和苹果 -webkit-
ie9以及以上版本 -ms-
欧朋 -o-
早期的苹果浏览器（safari） linux konqueror 需要加：-khtml-
谷歌2013 自己开发了新的内核 blink

响应式手机网页：【更换样式表（媒体查询：让css能够根据浏览器宽度来选择是否被使用，js更换）
；约束视口；流式布局（让百分比写width、padding、margin）】

window对象的事件：onload加载完成； onresize调整尺寸； onsrcoll滚动滚轮。
js更换样式表
<script type = "text/javascript">
//更换样式表，需要在页面加载的时候执行一次，在浏览器尺寸变化的时候也要执行
gaibian();
window.onresize = gaibian;
function gaibian(){
var kuandu = document.documentElement.clientWidth;//浏览器的宽度
if(kuandu>600){
document.getElementById("mylink").href="css/1.css";
}else{
document.getElementById("mylink").href="css/2.css";
}
}
<script>
css根据宽度更换样式表（媒体查询）：
<link rel = "stylesheet" href = "css/1.css" type = "text/css" media="(min-width:800px)">
<link rel = "stylesheet" href = "css/2.css" type = "text/css" media="(max-width:799px)and
(min-width:600px)">
<link rel = "stylesheet" href = "css/3.css" type = "text/css" media="(max-width:599px)">
宽度≥800,1.css
799≥宽度≥600 2.css
500≥宽度 3.css
媒体查询的兼容性 ie9及以上，js检测宽度更换样式表是ie6也兼容的

【约束视口】
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-
scale=1.0 , user-scalable=no" name="viewport" id="viewport /">
一个id和name为viewport的meta元标记就表示现在要约束视口了。具体约束规则写在content中，
每个约束规则用逗号隔开。
width=device-width -- 命令视口的宽度，变为设备的宽（以1024*768屏幕为标准。iphone等手机
通常为320~380之间不等）
initial-scale=1.0 -- 命令视口默认的缩放等级为1
minimum-scale=1.0 -- 命令视口最小缩放等级为1
maximum-scale=1.0 -- 命令视口最大缩放等级为1
user-scalable=no -- 不允许用户缩放页面

当用户设备宽度大于980的时候，用的pc界面；
当用户设备宽度在620~979之间，用的pad界面；
当用户设备宽度小于619的时候，用手机界面。

【轮播图】
用swipe.js