网页布局的几种方式有哪些_做网页建议用哪种布局

网页布局的几种方式有哪些_做网页建议用哪种布局固定布局为网页设置一个固定的宽度,通常以px做为长度单位,常见于PC端网页。这种布局具有很强的稳定性与可控性,也没有兼容性问题,但不能根据用户的屏幕尺寸做出不同的表现。即如果用户的屏幕分辨率小于这

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

固定布局

  为网页设置一个固定的宽度,通常以px做为长度单位,常见于PC端网页。

  这种布局具有很强的稳定性与可控性,也没有兼容性问题,但不能根据用户的屏幕尺寸做出不同的表现。即如果用户的屏幕分辨率小于这个宽度就会出现滚动条,如果大于这个宽度则会留下空白。

 

流式布局(Liquid Layout

  为网页设置一个相对的宽度,页面元素的大小按照屏幕分辨率进行适配调整,但整体布局不变,通常以百分比做为长度单位(通常搭配 min-*、max-* 属性控制尺寸流动范围以免过大或者过小导致元素无法正常显示),高度大都是用px来固定住。流式布局的代表作栅格系统(网格系统)。

  例如设置网页主体的宽度为80%,min-width为960px。图片也作类似处理(width:100%, max-width一般设定为图片本身的尺寸,防止被拉伸而失真)。

  缺点:因为宽度使用%百分比定义,但是高度和文字大小等大都是用px来固定,所以在大屏幕下显示效果会变成有些页面元素宽度被拉的很长,但是高度、文字大小还是和原来一样,显示非常不协调

 

栅格化布局

  将网页宽度人为的划分成均等的长度,然后排版布局时则以这些均等的长度做为度量单位,通常利用百分比做为长度单位来划分成均等的长度。

  比如像 bootstrap,foundation 这些框架采用的就是栅格系统,只要给页面元素添加其栅格系统指定的类名,就能达到想要的响应式布局效果。

  bootstrap 的栅格系统是通过一系列的行和列的组合来创建页面布局,它的栅格系统最大分为12份:

网页布局的几种方式有哪些_做网页建议用哪种布局

不过 版本bootstrap3 与 bootstrap4 实现栅格系统方式不一样, bootstrap3 为了兼容 IE,采用的是浮动方式来实现栅格系统:

网页布局的几种方式有哪些_做网页建议用哪种布局

即每一个栅格都是用左浮动和百分比来进行排版,当窗口宽度改变,对应改变 container 容器的宽度,对应栅格宽度自然也跟着改变:

 网页布局的几种方式有哪些_做网页建议用哪种布局

bootstrap4 放弃了对IE的支持,采用的是最新的伸缩布局方式:

网页布局的几种方式有哪些_做网页建议用哪种布局

 

自适应布局(Adaptive Layout)

  自适应布局的特点是分别为不同的屏幕分辨率定义布局,即为不同类别的设备创建不同的静态布局,每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换调用相应的布局(页面元素位置发生改变而大小不变),但在每个静态布局中,页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。

  在这种布局方式下,当视口大小低于设置的最小视口时,界面会出现显示不全,溢出,并出现滚动条。而且当需求改变时,可能会改动多套代码。

  使用自适应布局时,首先在网页代码的头部,加入一样 viewport 标签:

<meta name="viewport" content="width=device-width, initial-scale=1" />

设置网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。然后 CSS 代码不能使用绝对大小,即不能指定像素 px 宽度,而只能使用相对大小 em 或者 %百分比、rem等。

 

响应式布局

  响应式布局的目标是确保一个页面在所有终端上(各种尺寸的PC、手机、ipad等)都能显示出令人满意的效果。通过检测设备信息,决定网页布局方式,即用户如果采用不同的设备访问同一个网页,有可能会看到不一样的展示效果,一般情况下是检测设备屏幕的宽度来实现。可以把响应式布局看作是流式布局和自适应布局设计理念的融合。

  应用响应式布局,首先要使用视图的 meta 标签来进行重置:

 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

 

然后使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。同自适应布局一样,在书写 CSS 样式时,元素宽度不能使用绝对宽度,而要使用相对大小。

  Media Queries 是响应式设计的核心,它根据条件告诉浏览器如何为指定视图宽度渲染页面。在优秀的响应范围设计下可以给适配范围内的设备最好的体验,在同一个设备下实际还是固定的布局。但媒体查询是有限的,也就是可以枚举出来的,只能适应主流的宽高。要匹配足够多的屏幕大小,工作量不小,而且页面中会出现隐藏元素的操作,这样代码就比较冗余,加载时间加长,此外设计也需要多个版本。

 

自适应布局和响应式布局对比:

  不同点:

    1.自适应需要开发多套界面;响应式只需开发一套界面。

    2. 自适应对页面的屏幕适配实在一定的范围,比如:pc 端 > 1024px; 平板 768 ~ 1024px; 手机端 < 768px; 响应式是一套页面同时兼容在 pc 端、平板和手机端的各个不同视口,而不是为每个终端做一个特定的版本,所以需要考虑的状态非常多。

  相同点: 

    都是通过检测视口分辨率,使页面适应不同分辨率的视口。

 

弹性布局(rem/em布局)

  弹性布局跟流布局很像,网页宽度不固定,使用 em 或 rem 单位进行相对布局,避免了使用像素 px 布局在高分辨率下几乎无法辨识的缺点,相对%百分比更加灵活,同时可以支持浏览器的字体大小调整和缩放等的正常显示。但弹性布局也有局限性,如果不对这种布局设置一个最小宽度,当用户缩小窗口到足够小时会造成布局严重错位。

  关于 em / rem / px / % … 的使用 戳这里

 

伸缩布局(Flex box)

  使用 css3 Flex 系列属性进行相对布局,用来为盒模型提供最大的灵活性。对于富媒体和复杂排版的支持非常大,但是存在兼容性问题。任何一个容器都可以指定为 flex 布局,行内元素也可以使用。

  注意:设为 flex 布局后,子元素的 float、clear、vertical-align 属性将失效。

 

注:以上几种布局方式并不是独立存在的,实际开发过程中往往是相互结合使用的,根据项目的需求,取各自之所长。

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/168207.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • java中|和||的使用和区别「建议收藏」

    java中|和||的使用和区别「建议收藏」区别||为逻辑运算符,而|为位运算符。位运算可以进行进行int数的或运算。例:4|1=54写作二进制数1001写作二进制数001做或运算得出101即5||只要满足第一个条件,后面的条件就不再判断,而|要对所有的条件进行判断。我们定义一个链表classListNode{intval;ListNodenext;ListNode(intx){val=x;}}Lis

  • ANSI 编码_ansi格式编码

    ANSI 编码_ansi格式编码为使计算机支持更多语言,通常使用0x80~0xFF范围的2个字节来表示1个字符。比如:汉字’中’在中文操作系统中,使用[0xD6,0xD0]这两个字节存储。 不同的国家和地区制定了不同的标准,由此产生了GB2312,BIG5,JIS等各自的编码标准。这些使用2个字节来代表一个字符的各种汉字延伸编码方式,称为ANSI编码。在简体中文系统下,ANSI编码

  • 微信小程序轮播图实现(超简单)「建议收藏」

    微信小程序轮播图实现(超简单)「建议收藏」微信小程序轮播图实现(超简单)微信小程序的轮播图可以用官方给的swiper组件。下图是官方给出的swiper属性,我截取了比较常用的一些属性。效果实现如下图1.普通开发(不采用云开发)1.1wxml<viewclass=”banner”><swiperindicator-dotsindicator-color=”rgba(255,255,255,0.5)”indicator-active-color=”#fff”circularautoplay

  • [Python从零到壹] 十七.可视化分析之Matplotlib、Pandas、Echarts入门万字详解[通俗易懂]

    [Python从零到壹] 十七.可视化分析之Matplotlib、Pandas、Echarts入门万字详解[通俗易懂]前一篇文章讲述了数据预处理、Jieba分词和文本聚类知识,这篇文章主要介绍Matplotlib和Pandas扩展包绘图的基础用法,同时引入Echarts技术,该技术主要应用于网站可视化展示中。本文内容以实例为主,给读者最直观的图形感受。两万字基础文章,希望对您有所帮助。

  • 全国城市拼音对照表[通俗易懂]

    全国城市拼音对照表[通俗易懂]全国城市拼音对照表

  • SAP License:实例讲解SAP与金税接口

    SAP License:实例讲解SAP与金税接口SAP与金税接口的问题很多人问我。今天我通过实例给大家讲解一下。步骤一:与金税公司取得联系,他们会给一个Word文档,里面描述金税系统的字段描述。步骤二:与金税公司签订合同,取得接口安装程序,现在有EXCEL接口和文本接口两种,建议购买EXcel接口,同时金税公司会提供U盘加密卡。步骤三:在SAP系统中做如下配置:销售和分销-基本功能-输出控制-输出确定-使用条件技术的输出确认-维护开票单据的输出确定-维护输出类型VV31双击行项目设置打印机(图片插入不进来)步骤四:Abap开发程序。

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号