html根据屏幕尺寸调整,【Web】根据屏幕大小调整元素属性(样式)

使用css方式

html代码

响应式判断

操作浏览器窗口，查看效果。

css样式代码

.example {

padding: 20px;

color: white;

}

/* Extra small devices (phones, 600px and down) */

@media only screen and (max-width: 600px) {

.example {background: red;}

}

/* Small devices (portrait tablets and large phones, 600px and up) */

@media only screen and (min-width: 600px) {

.example {background: green;}

}

/* Medium devices (landscape tablets, 768px and up) */

@media only screen and (min-width: 768px) {

.example {background: blue;}

}

/* Large devices (laptops/desktops, 992px and up) */

@media only screen and (min-width: 992px) {

.example {background: orange;}

}

/* Extra large devices (large laptops and desktops, 1200px and up) */

@media only screen and (min-width: 1200px) {

.example {background: pink;}

}

实现屏幕(窗口)不同大小，

标签显示不同的背景色；

css语法:(css有很多媒体类型)

@media mediatype and|not|only (media feature) {

CSS-Code;

}

使用javascript方式

html代码

js代码

//dom加载完后执行:$(function() {}) 是$(document).ready(function()的简写

$(function () {

changeClass();

});

//浏览器的窗口大小发生改变时执行

$(window).resize(function () {

//执行代码块

changeClass();

});

//当屏幕小于1400时添加一个属性，大于的时候删除属性

function changeClass() {

let ww = $(window).width();

if( ww > 1400 ){

$('body').removeClass('sidebar-collapse');

} else if( ww > 600 && ww < 1400 ){

$('body').addClass('sidebar-collapse');

}

}