精华内容
下载资源
问答
  • 前端7大常用布局方式

    千次阅读 多人点赞 2019-10-21 16:35:51
    Web前端常用布局方式 页面的布局方式是块状元素依次从上至下、从左至右进行布局 布局的作用 对公司、企业而言视觉极佳的布局效果能让在瞬间抓住客户的心,能吸引潜在的合作者。 适用性 ,根据不同行业情况进行不同...

    Web前端常用布局方式

    页面的布局方式是块状元素依次从上至下、从左至右进行布局

    布局的作用

    对公司、企业而言视觉极佳的布局效果能让在瞬间抓住客户的心,能吸引潜在的合作者。

    1. 适用性 ,根据不同行业情况进行不同效果的制作。
    2. 吸引性,视觉效果优秀的布局效果能瞬间吸引客户。

    布局方式

    一、静态布局

    静态布局是最为原始的布局方式,没有什么技术性可言,往往是计算机行业刚刚入门的小白使用的布局方式。制作的网页上的元素尺寸一律以px为单位。

    .bor{
    	width: 360px;
    	height: 255px;
    	border: 1px solid black;
    	margin-bottom: 30px;
    }
    .bor p{
    	color: #000000;
    	font-size: 16px;
    }
    .border-pic{
    	width: 360px;
    	height: 255px;
    	margin-left: 10px;
    	margin-top: 10px;
    	overflow: hidden;
    }
    .border-pic img{
    	width: 360px;
    	height: 255px;
    }
    

    布局特点: 页面上的布局是按最初写代码时候的布局方式进行布局的,常规的pc网站是进行设置了宽度值进行布局的,不会随着pc端的屏幕的大小而变化。
    优点: 这种布局方式不管是对资深的前端开发工程师还是刚入门的小白来说都是最简单的,最让人容易以接受、学习的,没有我们所说的兼容性的问题。这种布局方式大多用在门户网站和企业的官网上,这些官网的设备的尺寸是固定的,这种布局方式往往是最简单的方法。
    缺点: 不会随着pc端的屏幕大小而变化。

    二、弹性布局(flexbox)

    弹性布局可以简便、完整、响应的实现各种页面上的布局。与静态不同的是,使用em或rem单位(lem=16px,1rem=10px)进行相对布局,相对使用百分比更加方便、灵活,相应同时支持浏览器的字体大小调整和缩放的等正常显示。
    优点:
    1.适应性强,在做多种不同的屏幕分辨率不同的界面是非常使用。
    2.随意按照宽度、比例划分元素的宽高。
    3.可以轻松的改变元素的显示顺序。
    4.网页布局实现快捷,维护起来更加容易。
    如果做移动端时,如果客户对细微的之处的要求不高,使用弹性布局进行制作是最好的选择,一份css+一份js调节font-size搞定。
    缺点: 浏览器兼容性较差,只能兼容到IE9及以上。

    三、自适应布局(bootstrap)

    自适应布局分别为不同屏幕不同分辨率定义布局,即是创建多个静态页面,每个静态页面对应一个屏幕分辨率的一个范围内。在改变不同的屏幕分辨率可以切换到不同的静态布局上,但是布局中的元素位置会发生改变,但是在每个静态布局中,页面中的元素不会随着窗口大小的调整发生变化。使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验,在同一个设备下实际还是固定的布局。
    优点:
    1.对网站的复杂程度兼容性更大;
    2.对开发工程师来说制作的成本代价更低;
    3.代码执行效果更高效;
    4.测试时更加容易,运营相对更加精准。
    缺点: 在现如今的移动端设计百花齐放的时期之下,同一个网站往往需要为不同的设备制作不同的页面,不但会增加开发成本,还会因为客户的需求改变时,可能会改动多套代码、流程相比较来说较繁琐。

    四、流式布局(fluid)

    流式布局的布局方式是页面的元素的宽度按照屏幕的分辨率进行适配的调整,但是整体布局不变,也称之为栅栏系统。使用%百分比定义宽度,高度大都是用px来固定住,可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整,尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。
    缺点: 屏幕大小变化时,页面元素也随之变化但是布局不变。这就会因为如果屏幕太大或太小都会布局时元素无法正常显示。

    五、响应式布局

    响应式布局是css3增加的新布局方式,该布局方式2010年提出来的一个概念,说白了就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用“大势所趋”来形容也不为过。响应式几乎成为优秀页面布局的标准。
    设计方法: 媒体查询+流式布局。通常使用@media媒体查询,和网格系统配合相对布局单位进行布局,实际上说白了就是综合响应式等技术通过css给单一网页不同设备分辨率返回不式时的技术。
    优点: 适应pc端和移动端,如果有足够的耐心,页面效果会很完美。
    缺点:
    1.只能适应主流的宽高;
    2.如果匹配足够多的设备屏幕的大小,对于工程师来说工作量不小,设计更需要多个版本,工作量增大。

    六、浮动布局

    浮动布局进行调用浮动属性改变页面中元素的位置,浮动布局应该是目前各大网站用的最多的一种布局方式了,但是也特别复杂。浮动元素是脱离文档流的,但不脱离文本流。浮动元素有左浮动(float : left)和右浮动(float : right)两种

    .lian{
    	width: 90%;
    	padding-left: 5%;
    }
    .lian img{
    	float: right;
    	margin-top: -180px;
    }
    .phone ul li{
    	list-style: none;
        margin-top: 50px;
        margin-left: 70px;
        color: #808080;
    }
    .phone ul li img{
    	position: absolute;
    	margin-left: -80px;
    	float: left;
    	margin-top: -5px;
    }
    .view{
    	margin-top: 50px;
    	margin-left: -5px;
    	float: left;
    }
    .view input{
    	width: 120px;
    	height: 40px;
    	border-radius: 6px;
    	border: 1px solid #3CB371;
    	background-color: #3CB371;
    	font-size: 16px;
    	color: white;
    

    优点: 兼容性比较好
    缺点: 浮动带来的影响比较多,页面宽度不够的时候会影响布局。

    七、定位布局

    定位布局时利用position属性控制页面元素设置一些不规则布局。
    定位元素的各个属性:
    1.static 静态定位: HTML元素的默认值,即没有定位,元素出现在正常的流中。

    div.static {
        position: static;
        border: 3px solid #73AD21;
    }
    

    2.fixed 固定定位: 元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。Fixed定位使元素的位置与文档流无关,因此不占据空间。Fixed定位的元素和其他元素重叠。

    p.pos_fixed{
        position:fixed;
        top:30px;
        right:5px;
    }
    

    3.relative 相对定位: 相对定位元素的定位是以自身为参照物。对象不可层叠、不脱离文档流,移动相对定位元素,但它原本所占的空间不会改变。通过 top,bottom,left,right 定位。

    h2.pos_top
    {
        position:relative;
        top:-50px;
    }
    

    4.absolute 绝对定位 absolute 定位使元素的位置与文档流无关,因此不占据空间。元素和其他元素重叠。通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,absolute元素将以body坐标原点进行定位。

    h2{
        position:absolute;
        left:100px;
        top:150px;
    }
    

    5.sticky 粘性定位 基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed,它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一,换言之,指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。

    div.sticky {
        position: -webkit-sticky; /* Safari */
        position: sticky;
        top: 0;
        background-color: green;
        border: 2px solid #4CAF50;
    }
    

    6.z-index 因为页面中元素的定位与文档流无关,所以定位的元素可以覆盖在文档流上面。所以z-index属性指定了一个元素的堆叠顺序(哪个元素应该放在前面/后面)。z-index的值必须取正整数,数值越大显示的优先级就越高。 如果两个定位元素重叠,而且还没有指定z - index,name最后定位在HTML代码中的元素将被显示在最前面。

    展开全文
  • WEB前端常用布局方式

    2019-10-22 20:20:34
    Web前端常用布局方式 页面的布局方式是块状元素依次从上至下、从左至右进行布局 布局的作用 对公司、企业而言视觉极佳的布局效果能让在瞬间抓住客户的心,能吸引潜在的合作者。 适用性,根据不同行业情况进行...

    Web前端常用布局方式

    页面的布局方式是块状元素依次从上至下、从左至右进行布局

    布局的作用

    对公司、企业而言视觉极佳的布局效果能让在瞬间抓住客户的心,能吸引潜在的合作者。

    1. 适用性 ,根据不同行业情况进行不同效果的制作。
    2. 吸引性,视觉效果优秀的布局效果能瞬间吸引客户。

    布局方式

    一、静态布局

    静态布局是最为原始的布局方式,没有什么技术性可言,往往是计算机行业刚刚入门的小白使用的布局方式。制作的网页上的元素尺寸一律以px为单位。

    .bor{
    	width: 360px;
    	height: 255px;
    	border: 1px solid black;
    	margin-bottom: 30px;
    }
    .bor p{
    	color: #000000;
    	font-size: 16px;
    }
    .border-pic{
    	width: 360px;
    	height: 255px;
    	margin-left: 10px;
    	margin-top: 10px;
    	overflow: hidden;
    }
    .border-pic img{
    	width: 360px;
    	height: 255px;
    }
    

    布局特点: 页面上的布局是按最初写代码时候的布局方式进行布局的,常规的pc网站是进行设置了宽度值进行布局的,不会随着pc端的屏幕的大小而变化。
    优点: 这种布局方式不管是对资深的前端开发工程师还是刚入门的小白来说都是最简单的,最让人容易以接受、学习的,没有我们所说的兼容性的问题。这种布局方式大多用在门户网站和企业的官网上,这些官网的设备的尺寸是固定的,这种布局方式往往是最简单的方法。
    缺点: 不会随着pc端的屏幕大小而变化。

    二、弹性布局(flexbox)

    弹性布局可以简便、完整、响应的实现各种页面上的布局。与静态不同的是,使用em或rem单位(lem=16px,1rem=10px)进行相对布局,相对使用百分比更加方便、灵活,相应同时支持浏览器的字体大小调整和缩放的等正常显示。
    优点:
    1.适应性强,在做多种不同的屏幕分辨率不同的界面是非常使用。
    2.随意按照宽度、比例划分元素的宽高。
    3.可以轻松的改变元素的显示顺序。
    4.网页布局实现快捷,维护起来更加容易。
    如果做移动端时,如果客户对细微的之处的要求不高,使用弹性布局进行制作是最好的选择,一份css+一份js调节font-size搞定。
    缺点: 浏览器兼容性较差,只能兼容到IE9及以上。

    三、自适应布局(bootstrap)

    自适应布局分别为不同屏幕不同分辨率定义布局,即是创建多个静态页面,每个静态页面对应一个屏幕分辨率的一个范围内。在改变不同的屏幕分辨率可以切换到不同的静态布局上,但是布局中的元素位置会发生改变,但是在每个静态布局中,页面中的元素不会随着窗口大小的调整发生变化。使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验,在同一个设备下实际还是固定的布局。
    优点:
    1.对网站的复杂程度兼容性更大;
    2.对开发工程师来说制作的成本代价更低;
    3.代码执行效果更高效;
    4.测试时更加容易,运营相对更加精准。
    缺点: 在现如今的移动端设计百花齐放的时期之下,同一个网站往往需要为不同的设备制作不同的页面,不但会增加开发成本,还会因为客户的需求改变时,可能会改动多套代码、流程相比较来说较繁琐。

    四、流式布局(fluid)

    流式布局的布局方式是页面的元素的宽度按照屏幕的分辨率进行适配的调整,但是整体布局不变,也称之为栅栏系统。使用%百分比定义宽度,高度大都是用px来固定住,可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整,尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。
    缺点: 屏幕大小变化时,页面元素也随之变化但是布局不变。这就会因为如果屏幕太大或太小都会布局时元素无法正常显示。

    五、响应式布局

    响应式布局是css3增加的新布局方式,该布局方式2010年提出来的一个概念,说白了就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用“大势所趋”来形容也不为过。响应式几乎成为优秀页面布局的标准。
    设计方法: 媒体查询+流式布局。通常使用@media媒体查询,和网格系统配合相对布局单位进行布局,实际上说白了就是综合响应式等技术通过css给单一网页不同设备分辨率返回不式时的技术。
    优点: 适应pc端和移动端,如果有足够的耐心,页面效果会很完美。
    缺点:
    1.只能适应主流的宽高;
    2.如果匹配足够多的设备屏幕的大小,对于工程师来说工作量不小,设计更需要多个版本,工作量增大。

    六、浮动布局

    浮动布局进行调用浮动属性改变页面中元素的位置,浮动布局应该是目前各大网站用的最多的一种布局方式了,但是也特别复杂。浮动元素是脱离文档流的,但不脱离文本流。浮动元素有左浮动(float : left)和右浮动(float : right)两种

    .lian{
    	width: 90%;
    	padding-left: 5%;
    }
    .lian img{
    	float: right;
    	margin-top: -180px;
    }
    .phone ul li{
    	list-style: none;
        margin-top: 50px;
        margin-left: 70px;
        color: #808080;
    }
    .phone ul li img{
    	position: absolute;
    	margin-left: -80px;
    	float: left;
    	margin-top: -5px;
    }
    .view{
    	margin-top: 50px;
    	margin-left: -5px;
    	float: left;
    }
    .view input{
    	width: 120px;
    	height: 40px;
    	border-radius: 6px;
    	border: 1px solid #3CB371;
    	background-color: #3CB371;
    	font-size: 16px;
    	color: white;
    

    优点: 兼容性比较好
    缺点: 浮动带来的影响比较多,页面宽度不够的时候会影响布局。

    七、定位布局

    定位布局时利用position属性控制页面元素设置一些不规则布局。
    定位元素的各个属性:
    1.static 静态定位: HTML元素的默认值,即没有定位,元素出现在正常的流中。

    div.static {
        position: static;
        border: 3px solid #73AD21;
    }
    

    2.fixed 固定定位: 元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。Fixed定位使元素的位置与文档流无关,因此不占据空间。Fixed定位的元素和其他元素重叠。

    p.pos_fixed{
        position:fixed;
        top:30px;
        right:5px;
    }
    

    3.relative 相对定位: 相对定位元素的定位是以自身为参照物。对象不可层叠、不脱离文档流,移动相对定位元素,但它原本所占的空间不会改变。通过 top,bottom,left,right 定位。

    h2.pos_top
    {
        position:relative;
        top:-50px;
    }
    

    4.absolute 绝对定位 absolute 定位使元素的位置与文档流无关,因此不占据空间。元素和其他元素重叠。通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,absolute元素将以body坐标原点进行定位。

    h2{
        position:absolute;
        left:100px;
        top:150px;
    }
    

    5.sticky 粘性定位 基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed,它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一,换言之,指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。

    div.sticky {
        position: -webkit-sticky; /* Safari */
        position: sticky;
        top: 0;
        background-color: green;
        border: 2px solid #4CAF50;
    }
    

    6.z-index 因为页面中元素的定位与文档流无关,所以定位的元素可以覆盖在文档流上面。所以z-index属性指定了一个元素的堆叠顺序(哪个元素应该放在前面/后面)。z-index的值必须取正整数,数值越大显示的优先级就越高。 如果两个定位元素重叠,而且还没有指定z - index,name最后定位在HTML代码中的元素将被显示在最前面。

    展开全文
  • 前端常用的几种布局方式(推)

    千次阅读 2019-10-22 16:12:34
    最为传统的一种布局方式,网页上的所有元素都是用px为单位进行设定的。 3级标题 布局特点: 不论屏幕的大小,页面宽高始终不变,始终维持最初设计时的样式大小来显示;常规的PC端网页都是用的静态布局,也就是设置了...

    静态布局:

    最为传统的一种布局方式,网页上的所有元素都是用px为单位进行设定的。

    布局特点:

    不论屏幕的大小,页面宽高始终不变,始终维持最初设计时的样式大小来显示;常规的PC端网页都是用的静态布局,也就是设置了min-width,当小于这个宽度的时候出现滚动条,当大于的时候让内容居中,外加背景。

    设计方法:

    PC :

    居中布局,所有的元素样式都使用绝对的宽高(px),设计一个布局,当屏幕大小进行变化时,使用滚动条进行查阅被遮挡的部分。

    移动端:

    另建立一个移动网站,单独设计一个布局,使用不同的域名(wap.或 m.)这种移动端布局常见于2G和3G时期,现在很少使用了。

    优点:

    这种布局方式对设计师和CSS编写者来说最为简单,也不存在兼容性的问题。

    缺点:

    很明显,这种布局方式不能对不同的屏幕做出不同的表现。
    当前,许多的门户网站、大部分企业的PC宣传都会选择这种布局方式,会有更好的展示效果。固定像素尺寸的网页是匹配固定像素尺寸显示器的最简单方法。到这种方法不是一种完全兼容未来网页的制作方法,我们需要一些适应未知设备的方法。

    流式布局:

    布局特点:

    当屏幕分辨率大小发生变化时,页面里的元素大小会变化但布局不会发生变化。

    设计方法:

    使用%百分比来定义宽度,高度大都是用px来固定,可以根据可视区域(viewpoint)和父元素的实时尺寸进行调整,尽可能的去适应各种分辨率。往往配合max-width/min-width等属性控制尺寸流动范围以免过大或者过小影响阅读。
    这种布局在web前端开发的早期历史上,用来应对不同尺寸的PC屏幕那时是的屏幕尺寸的差异没有现在那么大),在当今的移动端开发也是常用的布局方式。

    缺点:

    如果屏幕的尺度跨度太大,那么在相对原始设计而言过大或过小的屏幕上就不能正常的进行显示。因为宽度是使用的%来定义的,但是高度和文字的大小等都是用px来固定的,所以在大屏幕上有些元素的宽度被拉的很长,但是高度、文字的大小还是原来的样式,就会显得非常不协调。

    自适应布局:

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

    布局特点:

    当屏幕的大小发生变化时,页面里面的元素的位置会变化而大小不会变化。

    设计方法:

    使用@media媒体查询给不同的尺寸和介质的设备切换不同样式。
    在优秀的响应范围设计下可以给适配范围内的设备最好的体验,在同一个设备下实际上还是固定的布局。

    响应式布局:

    响应式设计的目标是确保一个页面在所有终端上(各种尺寸的PC、手机、平板、智能手表的Web浏览器等等)都能显示出令人满意的效果,对CSS编写者来说,有多种手法可以去实现,但通常是糅合了流式布局+弹性布局,再搭配媒体查询技术使用。
    分别为不同的屏幕分辨率定义布局,同时,在每个布局中,应用流式布局的理念,就是页面元素宽度随着窗口调整而自动适配。即:创建多个流式布局,分别对应一个屏幕分辨率范围。
    可以把响应式布局看作是流式布局和自适应布局设计理念的融合。
    响应式布局几乎已经成为优秀页面布局的标准。

    布局特点:

    每个屏幕分辨率下面会有一个布局样式,即元素位置和大小都会变。
    设计方法:媒体查询+流式布局。通常使用@media媒体查询和网格系统配合相对布局单位进行布局,实际上就是综合响应式。流失等上述技术通过CSS给单一网页不同设备返回不同样式的技术统称。

    优点:

    对PC和移动端有着非常好的适应,只要有足够的耐心,效果会非常棒。

    缺点:

    媒体查询是有限的,也就是可以枚举出来的,只能适应主流的宽高。
    要想 适配更多的屏幕大小,工作量大,设计也需要多个版本。

    响应式页面在头部会加上这一段代码:

    <meta name="applicable-device" content="pc,mobile">
    <meta http-equiv="Cache-Control" content="no-transform ">
    

    总结:

    响应式与自适应的原理是相似的,都是检测设备,根据不同的设备采用不同的CSS,而且CSS都是采用%百分比的,而不是固定宽度,不同点就是响应式的模板在不同的设备上看上去是不一样的,会随着设备的改变而改变展示样式,而自适应不会,所有的设备看起来都是一套模板,只不过是长度或是图片变小了,不会根据不同的设备展示不同的样式,流式及时采用了一些设置,当宽度大于多少时怎么展示,小于多少时怎么展示,而且展示的方式像流水一样,一部分一部分的加载,静态的就是采用固定的宽度。
    流式布局是用于解决类似的设备不同分辨率之间的兼容(一般分辨率差异较少);响应式是用于解决不同设备之间不同分辨率之间的兼容问题(一般是指PC,平板,手机等设备之间较大的分辨率差异)。

    弹性布局:

    rem、em区别:

    两者都是顺应不同网页字体大小展示而产生的。
    em是相对其父元素,在实际应用中相对而言会带来很多不便;
    rem则是始终相对于html大小,即页面根元素。

    布局特点:

    使用em或rem单位进行布局,相对%更加灵活,同时可以支持浏览器的字体大小调整和缩放等的正常显示,因为em是相对父级元素的原因没有得到推广。
    包裹文字的各元素的尺寸采用em/rem做单位,而页面的主要划分区域的尺寸仍使用%或px做单位(同「流式布局」或「静态/固定布局」)。早期浏览器不支持整个页面按比例缩放,仅支持网页内文字尺寸的放大,这种情况下。使用em/rem做单位,可以使包裹文字的元素随着文字的缩放而缩放。
    更能适应缩进/以字体单位padding或margin/浏览器设置字体尺寸等情况(因为em/rem相对于字体大小,会同步改变)。例如:p{ text-indent: 2em; }

    浏览器的默认字体高度一般为16px,即1em:16px,但是 1:16 的比例不方便计算,为了使单位em/rem更直观,CSS编写者常常将页面跟节点字体设为62.5%,比如选择用rem控制字体时,先需要设置根节点html的字体大小,因为浏览器默认字体大小16px*62.5%=10px。这样1rem便是10px,方便了计算。
    html{font-size:62.5%;}

    优点:

    理想状态是所有屏幕的高宽比和最初的设计高宽比一样,或者相差不多,完美适应。

    缺点:

    这种rem+js只不过是宽度自适应,高度没有做到自适应,一些对高度,或者元素间距要求比较高的设计,则这种布局没有太大的意义。如果只是宽度自适应,更推荐响应式设计。

    响应式和弹性布局之间的对比:

    响应式布局:改变浏览器宽度,“布局”会随之变化,不是一成不变的,例如导航栏在大屏幕下是横排,在小屏幕下是竖排,在超小屏幕下隐藏为菜单,也就是说如果有足够的耐心,在每一种屏幕下都应该有合理的布局,完美的效果。
    rem布局:改变浏览器宽度,页面所有元素的高宽都等比例缩放,也就是大屏幕下导航是横的,小屏幕下还是横的只不过变小了。

    结论:

    1.如果只做pc端,那么静态布局(定宽度)是最好的选择;
    2.如果做移动端,且设计对高度和元素间距要求不高,那么弹性布局(rem+js)是最好的选择,一份css+一份js调节font-size搞定;
    3.如果pc,移动要兼容,而且要求很高那么响应式布局还是最好的选择,前提是设计根据不同的高宽做不同的设计,响应式根据媒体查询做不同的布局。

    flex布局

    在这里插入图片描述

    所写博客皆为自己的心得,如有错误欢迎指出,侵删,谢谢

    展开全文
  • 本内容主要包含常用的web开发中所需要用到的布局方式,可以作为参考引用到自己的项目开发中。
  • 前端常用两种布局方式:双飞翼布局以及圣杯布局
  • 常见的四种前端布局方式

    千次阅读 2019-09-20 15:28:37
    常见的网页布局主要有四种: 1.自适应 2.响应式 3.静态 4.流式 刚刚接触网页设计的时候,常常分不清响应式布局和自适应布局,其实他们就是“傻傻分不清楚”… 静态布局(Static Layout) 即传统Web设计,对于PC设计...

    常见的网页布局主要有四种:

    1.自适应
    2.响应式
    3.静态
    4.流式
    刚刚接触网页设计的时候,常常分不清响应式布局和自适应布局,其实他们就是“傻傻分不清楚”…

    静态布局(Static Layout)

    即传统Web设计,对于PC设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分;对于移动设备,单独设计一个布局,使用不同的域名如wap.或m.。

    流式布局(Liquid Layout)

    流式布局(Liquid)的特点(也叫"Fluid") 是页面元素的宽度按照屏幕进行适配调整,主要的问题是如果屏幕尺度跨度太大,那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。

    响应式布局(Responsive Layout)

    自适应布局可以让你的设计更加可控,因为你只需要考虑了了几种状态就万事大吉了。

    但在响应式布局中你可能需要面对非常多状态——是的,大部分状态之间的区别很小,但它们又的确是不同的——这样一来就很难确切搞清你的设计会是什么样。同时这也带来了测试上的难题,你很难有绝对的把握预测到它会怎样。换个角度说,这也是响应式布局的魅力所在。通过允许表面上的不确定因素存在,你可以获得更高层次上的确定。虽然你无法在精确到像素级别准确预知你的设计如何在943px×684px

    视觉区域汇中展示,但你能确定的是它们一定能展示的很好——不管是表层特征还是布局结构都有条不紊。

    自适应布局(Adaptive Layout)

    自适应布局有它自己的优势,因为它们实施起来代价更低,测试更容易,这往往让他们成为更切实际的解决方案。自适应布局可以看做响应式布局的“穷兄弟”,在资源有限的情况下就可以让它出马。特别是改进现有网站的时候尤其奏效,因为全部重写代码在这时并不可行。这种案例中,采用自适应布局是一个不错的出发点。Dan Cederholm在他的文章《Adapted》中也曾说过,这种办法是可行的。

    响应式布局(Responsive Layout)&自适应布局(Adaptive Layout)

    问:“什么样的网站/项目适合使用自适应布局(固定断点)?什么样的网站适合响应式布局?(流体网格)”

    答:理论上来说,响应式布局在任何情况下都比自适应布局好一些,但在某些情况下自适应布局更切实际。

    展开全文
  • 1、静态布局 2、弹性布局 3、自适应布局 ...圣杯布局方式 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <...
  • 前端常见的几种布局方式

    千次阅读 2021-01-04 14:30:31
    静态布局(static layout)       即传统的Web布局,网页上的所有元素尺寸一律使用px作为单位。 1. 布局特点       不管浏览器尺寸具体是多少,网页...
  • web常见的五种前端布局方式

    千次阅读 2019-10-23 21:18:20
    web大前端布局 web大前端布局 常用布局 常用布局一般分为一下几大类: 文档布局(text) 文档流本质是 nomal flow (普通流、常规流) 元素在文档中的特点 块级元素,和内联元素。 块级元素:是自带有这行效果,...
  • Web前端布局详解

    千次阅读 多人点赞 2019-10-21 13:35:01
    Web前端布局方式布局的概念什么是布局布局的作用布局的方式浮动布局定位布局静态布局流式布局弹性布局自适应布局响应式布局常见布局问题高度坍塌 布局的概念 什么是布局 布局是前端人员的核心基础技能。 目的是...
  • 页面布局方式——前端

    千次阅读 2019-05-31 08:24:20
    文章目录页面布局方式——前端页面布局方式双飞翼布局多栏布局弹性布局(Flexbox)瀑布流布局流式布局(Fluid)响应式布局注 页面布局方式 页面布局方式主要有:双飞翼、多栏、弹性、流式、瀑布流、响应式...
  • 浅谈几种常用布局方式

    万次阅读 2016-11-28 16:13:37
    目前针对web前端页面的设计主要分为pc端和移动端页面,针对不同的页面我们可能会采取不同的布局格式,在整个布局的选择上,没有一成不变的,也没有任何一种布局能够满足各个方面的需要,在众多的布局方式中,我这边...
  • 前端页面几大布局

    千次阅读 2019-05-15 15:58:12
    从纯html结构加上css代码堆出来的页面,到类似bootstrap框架的栅格化布局,...对于工作中常用的几类布局,做个小结。 一、传统布局 浮动 定位 基本css 浮动(float) <!DOCTYPE html> <html lang="en">...
  • 前端布局方式分类

    千次阅读 2015-11-26 00:31:47
    web rem布局
  • 五种前端布局之table布局

    千次阅读 2020-11-18 09:27:59
    前端基本布局五种前端布局table布局float布局 五种前端布局 table布局、float布局、absolute布局、flexbox布局、grid布局 table布局 父级容器—display: table 子级容器—display:table-cell (1) 空间平均划分:...
  • 目前比较流行的布局有三种 1.流式布局: 含义:页面元素的宽度按照屏幕分辨率进行适配调整,但整体布局不变。这就导致如果屏幕太大或者太小都会导致元素无法正常显示 设计原理:使用百分比定义宽度,高度大都是用px...
  • 2021年前端面试题及答案

    万次阅读 多人点赞 2020-02-11 19:29:34
    前端面试汇总(2020年) 一 大纲 1、前言 2、前端工程化 3、前端设计模式 4、前端安全性问题 5、前端跨域问题 6、前端数据加密 7、前端http相关问题 8、*前端基础知识点面试题 9...
  • 前端学习(九)流式布局

    千次阅读 2020-08-09 10:10:12
    流式布局的概念 ...流式布局常用技巧 设置视口 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"> 选择默认的样
  • 1、浮动 float:left|right——最常用布局方式之一 设置了float的元素脱离了文档流。 需要注意在使用过浮动后,需要清除浮动,从而避免影响后面的非浮动元素。 2、inline-block display:inline-block 3、flexible ...
  • WEB前端简历模板

    万次阅读 多人点赞 2019-10-15 17:15:36
    WEB前端简历模板 详细资料 姓名:XXX 出生年月:XXXX年X月 名 族:X族 政治面貌:XXXX ...
  • 真正想学什么,也不知道自己究竟适合学习什么样的技术,有部分同学就会盲目的寻找资料去学,不要着急,小鸿这里带大家了解什么是前端前端入门需要学习哪些技术。学习前端需要具备什么样的学习条件。 什么是...
  • 16.box-sizing常用的属性有哪些?分别有什么作用? 属性值 · box-sizing:content-box · box-sizing:border-box · box-sizing:inherit content-box · 这是box-sizing的默认属性值 · 是CSS2.1中规定的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 46,400
精华内容 18,560
关键字:

前端常用布局方式