JS和CSS实现响应式
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS和CSS实现响应式相关的知识，希望对你有一定的参考价值。
一、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样式表。
<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" href="" id="rwdlink" /> <script type="text/javascript"> 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"; } } </script> </head>
以上是关于JS和CSS实现响应式的主要内容，如果未能解决你的问题，请参考以下文章
一行 CSS 代码实现响应式布局 – 使用 Grid 实现的响应式布局