JS实现响应式的简单代码
- PHPz原创
- 2017-04-03 15:33:382209浏览
一、CSS实现响应式
CSS响应式的实现主要依赖于CSS媒体查询：
媒体查询包含一个可选的媒体类型和零或多个表达式来限制使用媒体特性的样式表范围,例如：width，height，color。CSS3中的Media queries让内容的呈现可以只针对特定范围的输出设备而不必去改变内容本身。即通过媒体查询判断屏幕宽度，加载不同的CSS样式表
代码如下：注意一定要有一个默认样式表不加媒体查询，否则在IE8中访问时会没有样式表。
<head> <meta charset="UTF-8"> <title>响应式的演示</title> <link rel="stylesheet" type="text/css" href="css/reset.css" /> <link rel="stylesheet" type="text/css" href="css/index1200.css" /> <link rel="stylesheet" type="text/css" href="css/index980.css" media="screen and (min-width:980px) and (max-width:1200px)"/> <link rel="stylesheet" type="text/css" href="css/index640.css" media="screen and (min-width:640px) and (max-width:980px)"/> <link rel="stylesheet" type="text/css" href="css/index320.css" media="screen and (max-width:640px)"/> </head
二、JS实现响应式
JS响应式的实现也是依托于外联不同的CSS样式表，通过获取不同设备的屏幕宽度，选择性加载不同的CSS样式表。
93f0f5c25f18dab9d176bd4f6de5d30e a80eb7cbb6fff8b0ff70bae37074b813 b2386ffb911b14667cb8f0f91ea547a7响应式的演示6e916e0f7d1e588d4f442bf645aedb2f 36cd3b2ddc05fe575a9951c3bb566f83 0138a88b79d3bacb8491d5e7d7e27258 4c41bd30c55f798d965853cf38c818f4 8019067d09615e43c7904885b5246f0a var rwdlink = document.getElementById("rwdlink");
setCSS();
window.onresize = setCSS;
function setCSS(){
var windowWidth = document.documentElement.clientWidth;
if(windowWidth >= 1200){
rwdlink.href = "";
}else if(windowWidth >= 980){
rwdlink.href = "css/index980.css";
}else if(windowWidth >= 640){
rwdlink.href = "css/index640.css";
}else{
rwdlink.href = "css/index320.css";
}
}
2cacc6d41bbb37262a98f745aa00fbf09c3bca370b5104690d9ef395f2c5f8d1
以上是JS实现响应式的简单代码的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn