视口，移动适配等问题

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-width: 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>

 

posted @ 2019-05-16 01:10  扫驴  阅读(189)  评论(0)  编辑  收藏  举报