web怎么实现响应式网页布局-梓潼大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

web怎么实现响应式网页布局

本篇内容介绍了“web怎么实现响应式网页布局”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

成都创新互联公司自2013年起，先为永丰等服务建站，永丰等地企业，进行企业商务咨询服务。为永丰企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

一、Flex布局要领

Flexible Layout：弹性布局

Bootstrap：栅格布局

产品是做业务的，产品是为业务服务的。框架能满足百分之九十几的需求。

CSS1：display:block;

CSS2：display:table;

CSS3：display:flex; display:box; display:grid;

实践案例，设计如下图的页面：

web怎么实现响应式网页布局

分析页面：

整体是三行，header占整体页面20%，main占60%，footer占20%。

响应式布局，可随着页面大小自动放大、缩小调整。

容器：flex container

页面布局 —— 容器，容器中还可以放小容器。

局部：flex-direction:column

局部有横向。

整体：flex-direction:row

整体是横向布局。

整体页面可以做到横纵相交。

动手实验—— Flex box layout

窄屏模式：Mobile First

手机优先，因为现在移动互联网时代，使用手机看页面的比例已经超过PC，所以做页面的时候先考虑Mobile Fierst。

手机和PC显示最大的区别不是分辨率，而是显示比例的区别。手机是窄屏模式、PC是宽屏模式。

页面不需要做两套，而是基于media query(媒介查询)，自动侦测是窄屏模式还是宽屏模式。

窄屏模式下main区域是横向排列，宽屏模式下main区域内容是纵向排列。

宽屏模式：

web怎么实现响应式网页布局

动手实验
vscode里新建文件，扩展名是html。
代码编辑区输入html选择html5，此时vscode会自动填写html5的固定内容：
```
    
    
```

给vscode安装插件Live Server，装好以后在html文件编辑区鼠标右键调出菜单选择“open with live server”即可迅速看到页面显示效果。
先做布局，再写样式。
```
     header
```

nav

article

aside

footer

做完的样式如下：

编写网页使用编程工具Visual Studio Code，国外软件推荐使用必应搜索(英文版)。

web怎么实现响应式网页布局

接下来加样式：标签之间加样式。

加了style后的效果

注意.container里面的描述height: 100vh; (高度百分百)、.header和.footer 里面的描述height:20vh;(高度20%)。写网页最好写成百分比，不要写成绝对值。写绝对值无法缩放，写成百分比时放大缩小页面会自动缩放调整。
媒体查询，即判断显示设备，目前窄屏优先(适配手机)已完成，然后编写代码判断是否宽屏，编写宽屏优先(适配PC)的代码。
```
@media screen and (min-width:400px) {

            .main {
                flex-direction: row;
            }

            .main .nav,
            .main .aside {
                flex: 0 0 20vw;
            }

        }
```
min-width:400px 表示当屏幕宽度比大于等于400px时，切换布局方式。(老师开始设576，此时经常不会切换到宽屏模式，触发条件数字偏大)

以上是flex box布局模式。

二、Bootstrap栅格布局

推特出品的前端模板，老师推荐用bing国际版查官网https://getbootstrap.com/，在官网查资料。

(视频资料显示官网bootstrap版本是4.1.3，推断该视频是2年前出的)

实践案例：

web怎么实现响应式网页布局

从bootstrap找到card模板：
在head中导入bootstrap的链接

card复制2份，最终完整代码





    
    
    Document
    




    
        
        
            Card title
            Some quick example text to build on the card title and make up the bulk of the card's
                content.
            Go somewhere

新闻中心

一、Flex布局要领

二、Bootstrap栅格布局

其他资讯