前端页面中几种常用的flex布局
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端页面中几种常用的flex布局相关的知识,希望对你有一定的参考价值。
参考技术A 以下是前端开发中,常见的几种页面布局,使用flex实现WEB前端怎么布局?
在谈WEB前端怎么布局前,我们先梳理前端的布局类型,具体有以下几种:1.静态布局:不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态(定宽度)布局的,也就是设置了min-width,这样的话,如果小于这个宽度就会出现滚动条,如果大于这个宽度则内容居中外加背景,这种设计常见于pc端。
2.流式布局:布局特点是屏幕分辨率变化时,页面里元素的大小会变化而但布局不变。
3.自适应布局:自适应布局的特点是分别为不同的屏幕分辨率定义布局,即创建多个静态布局,每个静态布局对应一个屏幕分辨率范围。
4.响应式布局:布局特点是每个屏幕分辨率下面会有一个布局样式,即元素位置和大小都会变。
那么我们如何布局呢?通过以下几点来选择布局。
1.如果只做电脑端,最好的选择是静态布局。
2.如果做移动端,且设计对高度和元素间距要求不高,那么弹性布局(rem+js)是最好的选择,通过一份css+一份js调节font-size就搞定。
3.如果电脑端,移动端要兼容,而且要求很高,那么响应式布局还是最好的选择。前提是设计根据不同的高宽做不同的设计,响应式根据媒体查询做不同的布局。 参考技术A 这问题问得有点,,,,一下都不知道怎么回答了,,想了好一会。
这样一问,断定你是新手。
布局就是通过html各种标签的位置组合来达到你设计页面的效果。
建议你先用table吧,,,,,div css这些,如果在你问这样的问题前提下,,估计你会遇到非常多问题。
Dreamweaver只是一个工具。。。 参考技术B
初级的,可以使用table 布局,或者 div嵌套加css辅助布局。
稍微高级的可以用easyui 或者 其他js前端框架进行布局。
大致布局有几种格式,手风琴格式,选项卡,方位布局,瀑布式布局等等。
基本使用到的主要是css控制。
以上是关于前端页面中几种常用的flex布局的主要内容,如果未能解决你的问题,请参考以下文章