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

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

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

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

nav

@media screen and (min-width:400px) { .main { flex-direction: row; } .main .nav, .main .aside { flex: 0 0 20vw; } }

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

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

Go somewhere

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

Go somewhere