https://segmentfault.com/q/1010000003043170
https://blog.csdn.net/yuyu200302/article/details/41745439
http://www.cnblogs.com/zdhblog/p/6845618.html
https://www.cnblogs.com/koukouyifan/p/4066567.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> --> <title>媒体查询</title> <style> .c { height: 100px; width: 100px; } .c1 { background-color: red; } /*当打开网页的设备是一个显示器设备，并且显示器的宽度小于600px时，使用下面的样式*/ @media screen and (max- 700px) { .c1 { background-color: green; } } </style> </head> <body> <div class="c c1"></div> </body> <html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="jquery-3.2.1.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <style> .sb{ height:100px; background-color:Bisque; } .sd{ height:100px; background-color:grey; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-6"><div class="sb"></div></div> <div class="col-md-6"><div class="sd"></div></div> </div> <button class="cc btn btn-danger">container.innerWidth()</button> <button class="cs btn btn-danger">container.Width()</button> <button class="cb btn btn-danger">container.outerWidth()</button> <button class="qq btn btn-danger">col-md-6.Width()</button> <button class="bb btn btn-danger">col-md-6.innerWidth()</button> </div> <script> $(".cc").click(function(){ var a=$(".container").innerWidth(); $(".cc").text(a); }) $(".cs").click(function(){ var a=$(".container").width(); $(".cs").text(a); }); $(".cb").click(function(){ var a=$(".container").outerWidth(); $(".cb").text(a); }); $(".qq").click(function(){ var a=$(".col-md-6").width(); $(".qq").text(a); }); $(".bb").click(function(){ var a=$(".col-md-6").innerWidth(); $(".bb").text(a); }); </script> </body> </html>