Home >Web Front-end >JS Tutorial >JS implements simple code for responsiveness

JS implements simple code for responsiveness

PHPzOriginal: 2017-04-03 15:33:382285browse

1. CSS implementation of responsiveness

CSSThe implementation of responsiveness mainly relies on CSSMedia query:

A media query consists of an optional media type and zero or more expressions to limit the scope of the style sheet using media attributes ,For example: width, height, color. Media queries in CSS3 allow content to be rendered only for a specific range of output devices without having to change the content itself. That is, determine the screen width through media queries and load different CSS style sheets

The code is as follows: Note that there must be a default style sheet without media queries , otherwise there will be no style sheet when accessed in 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

2. JS implements responsiveness

JSResponsive realization also relies on Externally connect different CSS style sheets, and selectively load different CSS style sheets by obtaining the screen width of different devices.

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

The above is the detailed content of JS implements simple code for responsiveness. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Mobile terminal - responsive, rem/em, using Js to dynamically implement mobile terminal adaptationNext article：Mobile terminal - responsive, rem/em, using Js to dynamically implement mobile terminal adaptation

See more

JS implements simple code for responsiveness

Related articles