响应式页面设计

最新推荐文章于 2024-06-13 09:59:43 发布

Kai-Yang

最新推荐文章于 2024-06-13 09:59:43 发布

阅读量1.7k

点赞数 1

分类专栏：前端开发页面布局文章标签： html5 css3 前端

本文链接：https://blog.csdn.net/weixin_43476677/article/details/115125111

版权

前端开发同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

页面布局

1 篇文章 0 订阅

订阅专栏

文章目录

前言
一、响应式的基本概念
二、@media媒体查询
三、flex布局
- 1.是什么
- 1.怎么用
四、Bootstrap
总结

前言

随着移动互联网的使用越来越广泛，移动端浏览器的使用越来越多，因此开发网站必须考虑到在移动设备上访问的问题。那如何让PC端和移动端都可以很好的让网页内容显示呢？这就需要采取响应式页面设计了，响应式页面设计也是前端开发需要掌握的众多能力之一

一、响应式的基本概念

1.响应式布局
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着大屏幕移动设备的普及，用“大势所趋”来形容也不为过。

优点：面对不同分辨率设备灵活性强、能够快捷解决多设备显示适应问题。
缺点：兼容各种设备工作量大，效率低下、代码累赘，会出现隐藏无用的元素，加载时间加长

2.自适应布局
自适应网页设计（Responsive Web Design）指能使网页自适应显示在不同大小终端设备上新网页设计方式及技术。目的是在不同分辨率的不同设备上面显示相同的页面，让同一张网页自动适应不同大小的屏幕，根据屏幕的宽度，自动调节网页的内容大小，但是无论怎么样子，他们的主体的内容和布局是没有变化的。

优点：设计更加可控，考虑状态不多、代价更低，测试更容易。
缺点：不一定能满足所有页面状态，存在一些不确定因素。

3.响应式与自适应的区别

目的：自适应是在不同分辨率的不同设备上面显示相同的页面
范围：自适应布局可以看做响应式布局的“穷兄弟”
方法：自适应一般通过布局方法和动态单位来实现，而响应式一般用@media
难度：自适应是一套样式，而响应式可能多套样式

二、@media媒体查询

1.是什么

@media 可以针对不同的屏幕尺寸设置不同的样式，根据屏幕的大小的不同来显示不同布局的网页的内容。
可以通过@media查询来判断网页实时宽度来更改css样式达成响应式布局的设计。
@media的常用参数：width、height（浏览器可视宽高），device-width、device-height（设备屏幕的宽高），都有min和max

2.使用方式

直接在css中使用：

@media 类型 and (条件1) and (条件2){
        /*css样式*/
    }
 /*例子*/
@media screen and (max-width:1024px) {
     body{
          background-color: red;
        }
   }

使用link方式引入(宽度小于1024px)：

<link rel="stylesheet" type="text/css" href="css.css" media="screen and (max-width:1024px)"/>

使用@import导入(宽度小于1024px)：

 @import url("css.css") screen and (max-width:1024px);

3.一个例子

代码如下：

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>响应式</title>
    <!-- <link rel="stylesheet" type="text/css" href="index.css"/>
<link rel="stylesheet" type="text/css" href="index01.css" media="screen and (max-width:1024px) and (min-width:720px)"/>
    <link rel="stylesheet" type="text/css" href="index02.css" media="screen and (max-width:720px)"/> -->
    <style>
        *{
            margin:0;
            padding:0;
            text-align:center;
            color:yellow; 
        }
        
        .header{
            width:100%;
            height:100px;
            background:#ccc;
            line-height:100px;
        }
        .main{
            background:green;
            width:100%;
        }
        .left,.center,.right{
            float:left;
        }
        .left{
            width:20%;
            background:#112993;
            height:300px;
            font-size:50px;
            line-height:300px;
        }
        .center{
            width:60%;
            background:#ff0;
            height:300px;
            color:#fff;
            font-size:50px;
            line-height:400px;
        }
        .right{
            width:20%;
            background:#f0f;
            height:300px;
            font-size:50px;
            line-height:300px;
        }
        .footer{
            width:100%;
            height:50px;
            background:#000;
            line-height:50px;
            float: left;
        }
        @media screen and (max-width:1024px) and (min-width:720px) {
            .right{
                float:none;
                width:100%;
                background:#f0f;
                clear:both;
            }
            .left{
                width:30%;
            }
            .center{
                width:70%;
            }
            .main{
                height:600px;
            }

        }
        @media screen and (max-width:720px){
            .main{
                height:600px;
            }
            .left,.center,.right{
                float:clear;
                width:100%;
            }
        }
    </style>
</head>
<body>
    <div class="header">头部</div>
    <div class="main">
        <div class="left">左边</div>
        <div class="center">中间</div>
        <div class="right">右边</div>
    </div>
    <div class="footer">底部</div>
</body>
</html>

随着屏幕缩小的页面效果：
在这里插入图片描述

三、flex布局

1.是什么

Flex是Flexible Box 的缩写，意为"弹性布局"，是CSS3的一种布局模式，可以配合rem处理尺寸的适配问题。
用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。
更加符合响应式设计的特点。

1.怎么用

在这里插入图片描述
6个容器属性：

lex-direction：控制主轴的方向，默认row
flex-wrap：如果一条轴线排不下，如何换行
flex-flow：flex-direction属性和flex-wrap属性的简写形式
justify-content：定义项目在主轴上的对齐方式
align-items：定义项目在交叉轴上如何对齐
align-content：定义了多根轴线的对齐方式

6个项目属性：

order：定义项目的排列顺序，数值越小，排列越靠前
flex-grow：如果存在剩余空间，项目放大的比例。
flex-shrink：如果存在空间不足，项目的“缩小比例”。
flex-basis：定义项目在主轴方向上占据空间大小的初值
flex：是flex-grow、flex-shrink、flex-basis属性的缩写形式
align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

具体效果详见：详解CSS的Flex布局

四、Bootstrap

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包，是一个CSS/HTML框架。
Bootstrap是基于jQuery框架开发的，它在jQuery框架的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。

Bootstrap的核心功能特点：

跨设备、跨浏览器：可以兼容所有现代浏览器
响应式布局：不但可以支持pc端的各种分辨率的显示，还支持移动端pad，手机等屏幕的响应式切换显示。
提供全面的组件：提供了实用性很强的组件，包括：导航、标签、工具条、按钮等一系列组件，方便开发者调用。
内置jQuery插件：提供了很多实用性的 jquery 插件，这些插件方便开发者实现 Web 中各种常规特效。
支持HTML5\CSS3
支持LESS动态样式（Less 是一个 CSS 预处理器）

如何学习：官方文档

总结

上述主要讲解了什么是响应式布局，页面如何做到根据页面的宽度来调整布局，并介绍了一下Bootstrap框架。Bootstrap框架是一个方便、兼容性好的第三方库，使用Vue等其他框架开发也可以引用它提供的样式组件，提高开发的效率。

Kai-Yang

关注

1
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
响应式页面设计

文章目录前言一、响应式的基本概念二、@media媒体查询1.是什么2.使用方式3.一个例子三、flex布局1.是什么1.怎么用四、Bootstrap总结前言随着移动互联网的使用越来越广泛，移动端浏览器的使用越来越多，因此开发网站必须考虑到在移动设备上访问的问题。那如何让PC端和移动端都可以很好的让网页内容显示呢？这就需要采取响应式页面设计了，响应式页面设计也是前端开发需要掌握的众多能力之一一、响应式的基本概念1.响应式布局响应式布局是Ethan Marcotte在2010年5月份提出的一个概念
复制链接

扫一扫

专栏目录