适配布局类型

pc及移动端页面适配方法
设备屏幕有多种不同分辨率，页面适配方案有如下几种：

1、全适配：响应式布局+流体布局
2、移动端适配：
- 流体布局+少量响应式
- 基于rem的布局

流体布局：
元素的宽度用百分比来设置，高度写固定值。元素的边线无法用百分比，可以使用样式中的计算函数calc()来设置宽度，或者使用box-sizing属性将盒子设置为从边线计算盒子尺寸。

calc()
可以通过计算的方式给元素加尺寸，比如：width:calc(25% - 4px);

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- meta:vp -->
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin:0;
        }
        
        .con a{
            display:block;

            /*calc是css3的一个新属性，括号中的减号前后要加空格*/
            width:calc(25% - 4px);
            
            height:100px;
            background-color:gold;
            text-align: center;
            line-height: 100px;
            text-decoration:none;
            color:#333;
            font-size:14px;
            float:left;

            border:2px solid #000;
        }
    </style>
</head>
<body>
    <div class="con">
        <a href="#">菜单文字</a>
        <a href="#">菜单文字</a>
        <a href="#">菜单文字</a>
        <a href="#">菜单文字</a>
    </div>
</body>
</html>

box-sizing
1、content-box 默认的盒子尺寸计算方式
2、border-box 设置盒子的尺寸计算方式为从边框开始，盒子的尺寸，边框和内填充算在盒子尺寸内

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- meta:vp -->
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin:0;
        }
        
        .con a{
            display:block;

            /*calc是css3的一个新属性，括号中的减号前后要加空格*/
            /*width:calc(25% - 4px);*/
            
            width:25%;
            height:100px;
            background-color:gold;
            text-align: center;
            line-height: 100px;
            text-decoration:none;
            color:#333;
            font-size:14px;
            float:left;

            border:2px solid #000;

            box-sizing:border-box;
        }
    </style>
</head>
<body>
    <div class="con">
        <a href="#">菜单文字</a>
        <a href="#">菜单文字</a>
        <a href="#">菜单文字</a>
        <a href="#">菜单文字</a>
    </div>
</body>
</html>

响应式布局：
响应式布局就是使用媒体查询的方式，通过查询浏览器的宽度，不同的宽度应用不同的样式块，每个样式块对应的是该宽度下的布局方式，从而实现响应式布局。响应式布局的页面可以适配多种终端屏幕

响应式布局伪代码：

@media (max-width:960px){
.left_con{width:58%;}
.right_con{width:38%;}
}

@media (max-width:768px){
.left_con{width:100%;}
.right_con{width:100%;}
}

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>响应式布局</title>
    <style>
        
        body{margin:0;}

        .con div{
            width:23%;
            height:200px;
            border:2px solid #000;
            background-color:gold;
            margin:1%;

            float:left;
            box-sizing:border-box;
        }

        @media (max-width:800px){
            .con div{
                width:46%;
                margin:2%;
            }
        } 

        @media (max-width:500px){
            .con div{
                width:94%;
                margin:3%;
            }
        }
    </style>
</head>
<body>
    <div class="con">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>

基于rem的布局

em是一个单位，rem也是，只是参照的值不一样，rem参照的是html标签中的font-size

示例说明：

<!DOCTYPE html>
<html lang="en" style="font-size:30px;">
<head>
    <meta charset="UTF-8">
    <title>rem</title>
    <style>
        p{
            font-size: 20px;

            /*
            首行缩进：text-indent:40px;
            或者：
            */

            text-indent:2em;   
            /*2em = 2 * font-size
            如果是2rem，则 2rem = 2 * <html>中的font-size
            */
        }
    </style>
</head>
<body>
    <p>本教程针对那些想要设置一个生产web服务器的Django用户。它介绍了设置Django以使得其与uWSGI和nginx工作良好的必要步骤。它涵盖了所有三个组成部分，提供了一个web应用和服务器软件的完整栈。
    Django 是一个高层次的Python Web框架，鼓励快速开发和干净实用的设计。
    nginx (发音为 engine-x) 是一个免费开源并且高性能的HTTP服务器和反向代理，还是一个IMAP/POP3代理服务器。
</p>
</body>
</html>

示例2，其中js还没学：

<!DOCTYPE html>

<!-- 通过js实现窗口宽度不同时font-size相应改变 -->
<html lang="en" style="font-size:20px">
<head>
    <meta charset="UTF-8">

    <!-- 适配移动端 -->
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <script src="js/aa.js"></script>
    <title>rem示例，实现头部等比缩放</title>

    <style>
        
        body{margin:0;}
        
        .header{
            height:2.5rem; /*height = 2.5 * <html>中的font-size值*/
            background-color:gold;
            text-align:center;
            line-height:2.5rem;
            font-size:20px;
        }
    </style>
</head>
<body>
    <div class="header">头部文字</div>
</body>
</html>

posted @ 2019-03-11 21:45 greenfan 阅读(111) 评论(0) 收藏举报

刷新页面返回顶部

greenfan

适配布局类型

公告