您好,欢迎进入欧帝体育有限公司官网!

咨询热线:

400-888-8888

“欧帝体育”Web前端开发工程师必会的网页结构方法

发布时间:2021-05-19人气:
本文摘要:1.静态结构(static)1.1结构特点不管浏览器尺寸详细是几多,网页结构始终根据最初写代码时的结构来显示。通例的pc的网站都是静态(定宽度)结构的,也就是设置了min-width,这样的话,如果小于这个宽度就会泛起转动条,如果大于这个宽度则内容居中外加配景,这种设计常见于pc端。 1.2.设计方法PC设备:设计一个居中结构,一般具有牢固的宽度,当浏览器窗口缩小时,页面内容会被遮挡,出现横竖向转动条。

欧帝体育app官网

1.静态结构(static)1.1结构特点不管浏览器尺寸详细是几多,网页结构始终根据最初写代码时的结构来显示。通例的pc的网站都是静态(定宽度)结构的,也就是设置了min-width,这样的话,如果小于这个宽度就会泛起转动条,如果大于这个宽度则内容居中外加配景,这种设计常见于pc端。

1.2.设计方法PC设备:设计一个居中结构,一般具有牢固的宽度,当浏览器窗口缩小时,页面内容会被遮挡,出现横竖向转动条。移动设备:另外建设移动网站,单独设计一个结构,使用差别的域名如wap.或m.1.3 在移动端开发中接纳静态结构的两种方式(1)在viewport meta标签上设置width=320,页面的各个元素也接纳px作为单元。通过用JS动态修改标签的initial-scale使得页面等比缩放,从而恰好占满整个屏幕。(2)设在viewport meta标签上设置content"width=640,user-scalable=no,页面的各个元素也接纳px作为单元。

由于640px超出了手机宽度,浏览器会自动缩小页面至恰好全屏。1.4 优缺点优点:这种结构方式对设计师和前端来说都是最简朴的,不用去思量兼容性等问题。设计和开发成本低,后期维护成本低缺点:在小屏上有可能泛起横向转动条,在大屏上会泛起大量的空缺,不能凭据用户的屏幕尺寸做出差别的体现,用户体验比力差。

1.5 总结现在,大部门门户网站、大部门企业的PC宣传站点都接纳了这种结构方式。牢固像素尺寸的网页是匹配牢固像素尺寸显示器的最简朴措施。

但这种方法不是一种完全兼容未来网页的制作方法,我们需要一些适应未知设备的方法。我自己是一名从事了多年开发的web前端老法式员,现在告退在做自己的web前端私人定制课程,今年我花了一个月整理了一份最适合2020年学习的web前端学习干货,种种框架都有整理,送给每一位前端小同伴,想要获取的可以关注我的头条号并在后台私信我:前端,即可免费获取。

2.流式结构2.1 结构特点页面元素的宽度根据屏幕分辨率举行适配调整,页面里元素的巨细会变化而但结构稳定。网页中主要的划分区域的尺寸使用百分数(搭配min-*、max-*属性使用),例如,设置网页主体的宽度为80%,min-width为960px。

图片也作类似处置惩罚(width:100%, max-width一般设定为图片自己的尺寸,防止被拉伸而失真)。流式结构(Liquid)的特点(也叫"Fluid") 是代表作栅栏系统(网格系统)。2.2 设计方法使用%百分比界说宽度,高度多数是用px来牢固住,可以凭据可视区域 (viewport) 和父元素的实时尺寸举行调整,尽可能的适应种种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动规模以免过大或者过小影响阅读。

2.3 优缺点:优点:在差别分辨率屏幕上能够很好的展示页面元素,如果设计恰当,流动结构能制止在小屏幕上泛起水平转动条,对于差异不是很大的屏幕分辨率十分友好。缺点:如果屏幕太大或者太小都市导致元素无法正常显示。因为宽度使用%百分比界说,可是高度和文字巨细等多数是用px来牢固,所以在大屏幕的手机下显示效果会酿成有些页面元素宽度被拉的很长,可是高度、文字巨细还是和原来一样(即,这些工具无法变得“流式”),显示很是不协调。

2.4 总结流式结构是用于解决类似的设备差别分辨率之间的兼容(一般分辨率差异较少),典型的代表是栅格系统,一般页面中接纳百分比定宽的部门都可以看做是流动结构的属性。现在大部门网页为了实现更好的视觉效果都市全局或局部使用流式结构。

流式结构,如果宽度太小,放不下两个元素,后面的元素会自动转动到前面元素的下方,不会在水平偏向overflow(溢出),制止了水平转动条的泛起。3.自适应结构为差别的屏幕分辨率界说的结构 建立多个静态结构,每个静态结构对应一个屏幕分辨率规模。改变屏幕分辨率可以切换差别的静态局部(页面元素位置发生改变),但在每个静态结构中,页面元素不随窗口巨细的调整发生变化。

可以把自适应结构看作是静态结构的一个系列。3.1 结构特点屏幕分辨率变化时,页面内里元素的位置会变化而巨细不会变化。

3.2 设计方法使用 @media 媒体查询给差别尺寸和介质的设备切换差别的样式。在优秀的响应规模设计下可以给适配规模内的设备最好的体验,在同一个设备下实际还是牢固的结构。一列结构(静态结构):一列自适应居中<!doctype html><html><head><meta charset="utf-8"><title>一列结构:一列自适应居中</title><style>* {margin:0;padding:0;}html,body {height:100%;}.container {width:600px;height:100%;margin:0 auto;background:gray;border:1px red solid;}</style></head><body><div class="container"> 页面</div></body></html>两列结构:一列牢固宽+一列自适应<!doctype html><html><head><meta charset="utf-8"><title>两列结构:一列牢固宽,一列自适应</title><style>* {margin:0;padding:0;}html,body {height:100%;}aside, .main {height:100%;border:1px red solid;}aside {background:#0FF;float:left;width:200px;}.main {margin-left:210px;background:#CC3;}</style></head><body><aside>边栏导航</aside><div class="main">主体box</div></body></html>三列结构:中间列自适应宽+左右列牢固宽(一般使用圣杯结构和双飞翼结构)三列一般划分是子列、主列和附加列,其中子列一般是居左的导航,且宽度牢固;主列是居中的主要内容,宽度自适应;附加列一般是广告等分外信息,居右且宽度牢固。

圣杯结构:<div class="container"> <div class="main"></div> <div class="sub"></div> <div class="extra"></div> </div>.container { padding-left: 210px; padding-right: 190px;}.main { float: left; width: 100%; height: 300px;}.sub { position: relative; left: -210px; float: left; width: 200px; height: 300px; margin-left: -100%;}.extra { position: relative; right: -190px; float: left; width: 180px; height: 300px; margin-left: -180px;}双飞翼结构:<div class="main-wrapper"> <div class="main"></div> </div><div class="sub"></div> <div class="extra"></div> .main-wrapper { float: left; width: 100%;}.main { height: 300px; margin-left: 210px; margin-right: 190px; background-color: rgba(255, 0, 0, .5); }.sub { float: left; width: 200px; height: 300px; margin-left: -100%; background-color: rgba(0, 255, 0, .5); }.extra { float: left; width: 180px; height: 300px; margin-left: -180px; background-color: rgba(0, 0, 255, .5); }两种结构方式都是把主列放在文档流最前面,使主列优先加载。相同之处,都是让三列浮动,然后通过负外边距形成三列结构。差别之处在于如那边理中间主列的位置:圣杯结构是使用父容器的左、右内边距定位;双飞翼结构是把主列嵌套在div后使用主列的左、右外边距定位。4.响应式结构针对越来越多的移动端设备,一个web设计能够兼容多个终端。

通过CSS3中的Media Query(前言查询),接纳栅格化方式,划分为差别的屏幕分辨率界说结构。可以把响应式结构看作是流式结构和自适应结构设计理念的融合。

4.1 结构特点每个屏幕分辨率下面会有一个结构样式,即元素位置和巨细都市变。4.2 设计方法媒体查询+流式结构。通常使用 @media 媒体查询 和网格系统 (Grid System) 配合相对结构单元举行结构,实际上就是综合响应式、流动等上述技术通过 CSS 给单一网页差别设备返回差别样式的技术统称。4.3 优缺点优点:适应pc和移动端,如果足够耐心,效果完美缺点:(1)媒体查询是有限的,也就是可以枚举出来的,只能适应主流的宽高。

(2)要匹配足够多的屏幕巨细,事情量不小,设计也需要多个版本。4.4 总结响应式是用于解决不用设备之间不用分辨率之间的兼容问题(一般是指PC,平板,手机等设备之间较大的分辨率差异)。响应式与自适应的原理是相似的,都是检测设备,凭据差别的设备接纳差别的css,而且css都是接纳的百分比的,而不是牢固的宽度,差别点是响应式的模板在差别的设备上看上去是纷歧样的,会随着设备的改变而改变展示样式,而自适应不会,所有的设备看起来都是一套的模板,不外是长度或者图片变小了,不会凭据设备接纳差别的展示样式,流式就是接纳了一些设置,当宽度大于几多时怎么展示,小于几多时怎么展示,而且展示的方式向水流一样,一部门一部门的加载,静态的就是接纳牢固宽度的了。

5.弹性结构(rem/em结构)响应式结构中的一种,为了实现响应式结构,CSS3提供的一种最新结构模式。提供越发高效的方式来对结构容器的子元素举行排列、对齐和分配空缺空间。其实rem结构的本质是等比缩放,一般是基于宽度。

5.1 结构特点弹性结构接纳的单元是em或者rem,为了直观,所以直接接纳了单元缩写去区分。em和rem是一个相对长度单元,页面内各元素的尺寸接纳em/rem做单元,em是相对其父元素巨细,rem是始终相对于html巨细,即页面根元素。

5.2 设计方法首先,设置rem单元所代表的尺寸巨细和屏幕宽度成正比,有3中方案,先不必纠结其中的数值:(1)媒体查询, 设定每种屏幕对应的font-size@media screen and (min-width:240px) { html, body, button, input, select, textarea { font-size:9px; }}@media screen and (min-width:320px) {html, body, button, input, select, textarea {font-size:12px;}}// 红米Note2@media screen and (min-width:360px) {html, body, button, input, select, textarea {font-size:13.5px;}}@media screen and (min-width:375px) {html, body, button, input, select, textarea {font-size:14.0625px;}}(2)js设置html的font-size巨细document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 + 'px';(3)使用vw设置,vw也是一个相对单元,100vw即是屏幕宽度html{ font-size: 10vw;}这3种方式,都可以设置html的font-size和屏幕宽度成正比。这3种的单元是css尺寸,无论第一种方法的min-width还是第二种document.documentElement.clientWidth都是相对于设备的css尺寸而言。第一种,需要设置需要每种屏幕都设置对应的font-size,这些font-size都是凭据比例算出来的,比力繁琐,而且另有可能遗漏某些屏幕尺寸,不推荐。

第二种用js设置,比力利便,现在大部门网站接纳这种方式。第三种通过css的vw来设置,也很利便,而且不用写css,可是兼容性还不是特别好。综合推荐使用第二种。

5.3 优缺点优点:理想状态是所有屏幕的高宽比和最初的设计高宽比一样,或者相差不多,完美适应。缺点:这种rem+js只不外是宽度自适应,高度没有做到自适应,一些对高度,或者元素间距要求比力高的设计,则这种结构没有太大的意义。如果只是宽度自适应,更推荐响应式设计。

欧帝体育app官网

5.4 总结使用rem结构,实质都是通过动态改写html的font-size基准值,来实现差别设备下的良好统一适配;容器元素的字体巨细都不使用rem,需要分外的media查询;大部门情况下都可以用rem结构这个方法,只有底部的导航不用rem,而是用的flex结构。因为导航点击最多,所以给它一个牢固的巨细(其实就是高度牢固,宽度自适应的方案),底部导航和顶部搜索框用的高牢固,宽度自适应的方案,其余的部门基本都是随着浏览器宽度变化在等比例缩放.6.flex 结构Flex 结构的主要思想是使父容器能够调治子元素的宽度/高度(和排列顺序),从而能够最好地填充可用空间(主要是为了适应所有类型的显示设备和屏幕尺寸)。

flex布容器能够放大子元素使之尽可能填充可用空间,也可以收缩子元素使之不溢出。flexbox结构与偏向无关,差别于通例结构。6.1 结构特点接纳 Flex 结构的元素,称为 Flex 容器(flex container),简称"容器"。

它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。6.2 容器的属性6.3 项目的属性6.4 总结Flexbox结构最适合应用法式的组件和小规模结构,而 Gird 结构则适用于较大规模的结构。设为Flex结构以后,子元素的float、clear和vertical-align属性将失效。


本文关键词:“,欧帝体育,”,Web,前端,开发,工程师,必,会的,欧帝体育app官网

本文来源:欧帝体育-www.dinghg.com


400-888-8888