如何写出一个自适应屏幕大小的布局

如下图:

经常我们使用自己的电脑实现这种布局的时候,在自己的屏幕实现出来是正常的效果(貌似就是我们想要的),不过在不同的浏览器上运行的时候,多少还是会有些异样的差别,当放到别人的不同尺寸的电脑(手机)上的时候,这时候差别就更加明显了.也就是不是通用的!,那么这个代码就是有缺陷的.因此,这样解决--我们在网页的<head>中加入:

viewport:是用户网页的可视区域

content的属性:

1.width:控制viewport的大小,可以指定一个值,值为数字或者关键字device-width

2.height:和width相对应,指定高度.

3.inital-scale: 页面首次显示的缩放比例, 取值1.0则网页按照实际尺寸显示,无任何缩放,

4.maxmum-scale=1.0,用户能将页面放大的程度,1.0将禁止用户放大

5.minmum-scale=1.0,用户能将页面放小的程度,1.0将禁止用户缩小

6.user-scalable:设置是否允许用户对页面进行手动缩放,no为禁止缩放

还有一点就是我们并不能设置固定的宽度,这样不友好,因为我们并不知道其他的设备的屏幕大小,这样统一设置固定大小的方式太强硬,因此使用默认可视区的宽度,并使用百分比的形式来显示宽度.这样就能自适应不同的设备.

不采取设置固定的像素大小,如:width= 100px; 而是使用width = %; 百分比的形式.

代码如下:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0" />
        <title></title>
        <style>
            body {
                height: 800px;
            }
            
            .header {
                width: 100%;
                height: 15%;
                background-color: aquamarine;
            }
            
            .leftside {
                width: 20%;
                height: 75%;
                background-color: skyblue;
                float: left;
            }
            
            .main {
                float: right;
                width: 80%;
                height: 75%;
                background-color: steelblue;
            }
            
            .footer {
                clear: both;
                width: 100%;
                height: 10%;
                background-color: darkgray;
            }
        </style>
    </head>

    <body >
        <div class="header"></div>
        <div class="leftside"></div>
        <div class="main"></div>
        <div class="footer"></div>

    </body>

</html>

如何写出一个自适应屏幕大小的布局

猜你喜欢