Rumah > Artikel > hujung hadapan web > JS实现响应式的简单代码

JS实现响应式的简单代码

PHPzasal: 2017-04-03 15:33:382249semak imbas

一、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

Atas ialah kandungan terperinci JS实现响应式的简单代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：移动端-响应式、rem/em、利用Js动态实现移动端自适应Artikel seterusnya：利用js编写响应式侧边栏实例

Artikel berkaitan

Lihat lagi