前端之PC及移动端页面适配方法

最新推荐文章于 2024-03-13 12:18:29 发布

前端头条

最新推荐文章于 2024-03-13 12:18:29 发布

阅读量1.4w

点赞数 5

分类专栏： HTML5 SEO HTML 科技 web前端程序员编程资讯 JavaScript css 框架 css3 文章标签：程序员编程 web前端资讯科技

本文链接：https://blog.csdn.net/tianduantoutiao/article/details/90706850

版权

HTML 同时被 3 个专栏收录

40 篇文章 0 订阅

订阅专栏

科技

40 篇文章 0 订阅

订阅专栏

web前端

40 篇文章 0 订阅

订阅专栏

PC及移动端页面适配方法
设备屏幕有多种不同的分辨率，页面适配方案有如下几种：
1、全适配：流体布局+响应式布局
2、移动端适配：
流体布局+少量响应式
基于rem的布局
弹性盒模型

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

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

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

流体布局示例

<!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>Document</title>
    <style type="text/css">
        body{
            margin:0;
        }
        .con a{
            display:block;
            width:25%;
            /* 
            width:calc(25% - 4px);
            */
            height:100px;
            background-color:gold;
            text-align: center;
            line-height:100px;
            float:left;
            text-decoration:none;
            color:#333;
            font-size:14px;
            border:2px solid #000;

            /* 将盒子真实尺寸的计算方式设置为包含边框和padding */
            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>

流体布局示例

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

相应布局的伪代码如下：

@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>Document</title>
    <style type="text/css">        
        body{
            margin:0
        }
        .con div{
            width:23%;
            border:2px solid #000;
            background-color:gold;
            height:200px;
            margin:1%;
            float:left;
            box-sizing:border-box;
        }
        @media (max-width:800px){
            .con div{
                width:46%;
                margin:2%;
            }
        }
        @media (max-width:400px){
            
            .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>

响应式布局示例

流体布局是将一行的内容按照比例进行压缩；
响应式布局是，当宽度小于一定比例时，将一行的内容分两行放置。

最后，给大家推荐一个前端学习进阶内推交流圈子（前端资料分享），不管你在地球哪个方位，
不管你参加工作几年都欢迎你的入驻！（会定期免费提供一些收藏的免费学习书籍资料以及整理好的面试题和答案文档！）

如果您对这个文章有任何异议，那么请在文章评论处写上你的评论。

如果您觉得这个文章有意思，那么请分享并转发，或者也可以关注一下表示您对我们文章的认可与鼓励。

愿大家都能在编程这条路，越走越远。

前端头条

关注

5
点赞
踩
43

收藏

觉得还不错? 一键收藏
1
评论
前端之PC及移动端页面适配方法

PC及移动端页面适配方法设备屏幕有多种不同的分辨率，页面适配方案有如下几种：1、全适配：流体布局+响应式布局2、移动端适配：流体布局+少量响应式基于rem的布局弹性盒模型流体布局流体布局，就是使用百分比来设置元素的宽度，元素的高度按实际高度写固定值，流体布局中，元素的边线无法用百分比，可以使用样式中的计算函数 calc() 来设置宽度，或者使用 box-sizing 属性将盒子设置...
复制链接

扫一扫