web怎么实现响应式网页布局
本篇内容介绍了“web怎么实现响应式网页布局”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
成都创新互联公司自2013年起,先为永丰等服务建站,永丰等地企业,进行企业商务咨询服务。为永丰企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
一、Flex布局要领
Flexible Layout:弹性布局
Bootstrap:栅格布局
产品是做业务的,产品是为业务服务的。框架能满足百分之九十几的需求。
CSS1:display:block;
CSS2:display:table;
CSS3:display:flex; display:box; display:grid;
实践案例,设计如下图的页面:
分析页面:
整体是三行,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区域内容是纵向排列。
宽屏模式:
动手实验
vscode里新建文件,扩展名是html。
代码编辑区输入html选择html5,此时vscode会自动填写html5的固定内容:
给vscode安装插件Live Server,装好以后在html文件编辑区鼠标右键调出菜单选择“open with live server”即可迅速看到页面显示效果。
先做布局,再写样式。
headernavarticleasidefooter
做完的样式如下:
编写网页使用编程工具Visual Studio Code,国外软件推荐使用必应搜索(英文版)。
接下来加样式:标签之间加样式。
加了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年前出的)
实践案例:
从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 somewhereCard title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereCard title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewherecard效果1,直接复制后card是纵向排列成3个。
加了container会有留白和间距。(网页设计一大重要技巧是合适的留白,整齐的留白和间距。)
container下面一行写明布局是"row",现在卡片是横向排列了。注意:bootstrap布局优先考虑的是手机优先。
再调整style
marin-top指的是上边距,marin-left指的是左边距,marin-right指的是右边距,marin-bottom指的是下边距。
1em指的是当前字体大小的一个字符高或宽。15px是指15个像素。
自定义了.mycard,指定右边和下边空一个字符间距。
给下方的3个card 添加 mycard约束。
注意画面的层次感,背景不要用全白,例如京东很多页面背景是灰色。
在body中添加background-color:#f4f4f4,不要使用gray,使用gray颜色太暗,#f4f4f4白中带灰做背景恰好。
然后修改card头部显示的图片,从必应上搜索免费图片,将其连接加入src=""的双引号中间。
调整整体边距、卡片边距、card宽度为14rem。
最终代码:
最终效果:
使用模板的优点是自动适应不同设备不同分辨率,当屏幕宽度大时可以一行显示3个card,屏幕小一些一行自动调整为显示2个card,屏幕再变窄时会自动调整为一行显示1个card。
“web怎么实现响应式网页布局”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!
本文题目:web怎么实现响应式网页布局
标题来源:http://scyanting.com/article/ghjohg.html