网页屏幕自适应

最新推荐文章于 2024-06-20 11:34:29 发布

玛利亚丝吼吼

最新推荐文章于 2024-06-20 11:34:29 发布

阅读量1.3k

点赞数

本文链接：https://blog.csdn.net/qq_41214595/article/details/88942675

版权

方法一.利用table布局

利用table布局，并且将元素宽度以百分比形式显示，高度可用px显示。

【不适用绝对宽度,可以用px指定它的高度，但是不要用px指定它的宽度】。

设置包裹着很多子元素【id=tableContainer】的div标签css，让它的布局【display：table；】为表格形式，宽度为【width：100%】充满屏幕，如下图所示：

设置为表格布局以后，就要以“行“来考虑。

即下一行是设置tableRow的属性，

这行css是让它布局方式为行，那么我们只要在行中（这个div中）给需要分成列的部分添加css属性让它显示方式为表格的列的形式就可以了（给需要列的部分div设置display：table-cell），并为这些部分设置宽度【width：？%】，使其占据其父容器（tablecontainer）的百分之几。如下图所示（一行三列效果，aside部分的html没有贴出来，与drink类似）：

2.使用Bootstrap

主要是利用bootsrap的css属性，上图所示，在div中添加【div class="col-md-6 col-lg-4】，那么bootstrap会自动根据当前的屏幕选择合适的css属性。

代码：

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 中型和大型设备</title>
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h1>Hello, world!</h1>

<div class="col-sm-2 col-md-6 col-lg-4" style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #fff;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo.
</p>
</div>

<div class="col-sm-10 col-md-6 col-lg-8" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium.
</p>

<p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci velit, sed quia non numquam eius modi
tempora incidunt ut labore et dolore magnam aliquam quaerat
voluptatem.
</p>
</div>
</div>
</div>

</body>
</html>

下面是在不通过屏幕下的显示，可以看到，在1600的屏幕上，bootstrap自动为我们选择了col-lg-4和col-lg-8。在768的屏幕上自动为我们选择了col-sm-2和col-sm-10，不在这些范围内的它就自动换行。