JS实现响应式的简单代码

来源：懂视网责编：小采时间：2020-11-27 20:23:13

JS实现响应式的简单代码

JS实现响应式的简单代码:一、CSS实现响应式CSS响应式的实现主要依赖于CSS媒体查询：媒体查询包含一个可选的媒体类型和零或多个表达式来限制使用媒体特性的样式表范围,例如：width，height，color。CSS3中的Media queries让内容的呈现可以只针对特定范围的输出设备而不必去改变内容本

推荐度：

点击下载本文 文档为doc格式

导读JS实现响应式的简单代码:一、CSS实现响应式CSS响应式的实现主要依赖于CSS媒体查询：媒体查询包含一个可选的媒体类型和零或多个表达式来限制使用媒体特性的样式表范围,例如：width，height，color。CSS3中的Media queries让内容的呈现可以只针对特定范围的输出设备而不必去改变内容本

一、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实现响应式的简单代码

推荐度：

点击下载本文 文档为doc格式

标签：简单实现 js

热门焦点

JS实现响应式的简单代码

JS实现响应式的简单代码

JS实现响应式的简单代码

最新推荐

猜你喜欢

热门推荐