精华内容
下载资源
问答
  • 2019-10-16 19:10:34

    静态布局(Static Layout)

    即传统Web设计,网页上的所有元素的尺寸一律使用px作为单位。
    1、布局特点:不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态(定宽度)布局的,也就是设置了min-width,这样的话,如果小于这个宽度就会出现滚动条,如果大于这个宽度则内容居中外加背景,这种设计常见于pc端。
    2、设计方法:
      PC:居中布局,所有样式使用绝对宽度/高度(px),设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分;
      移动设备:另外建立移动网站,单独设计一个布局,使用不同的域名如wap.或m.。
      在移动端开发中采用静态布局的两种方式:(来自:流布局与响应式网页设计有什么区别?)
     (1)在viewport meta标签上设置width=320,页面的各个元素也采用px作为单位。通过用JS动态修改标签的initial-scale使得页面等比缩放,从而刚好占满整个屏幕。(见前端开发-web app 变革之rem)
     (2)设在viewport meta标签上设置content"width=640,user-scalable=no,页面的各个元素也采用px作为单位。由于640px超出了手机宽度,浏览器会自动缩小页面至刚好全屏。(具体见content"width=640,user-scalable=no" 然后再进行固定尺寸的px设计? - 前端开发)
    优点:这种布局方式对设计师和CSS编写者来说都是最简单的,亦没有兼容性问题。
    缺点:显而易见,即不能根据用户的屏幕尺寸做出不同的表现。
    当前,大部分门户网站、大部分企业的PC宣传站点都采用了这种布局方式。固定像素尺寸的网页是匹配固定像素尺寸显示器的最简单办法。但这种方法不是一种完全兼容未来网页的制作方法,我们需要一些适应未知设备的方法。

    自适应布局(Adaptive Layout)

    自适应布局的特点是分别为不同的屏幕分辨率定义布局,即创建多个静态布局,每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态局部(页面元素位置发生改变),但在每个静态布局中,页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。
    1、布局特点:屏幕分辨率变化时,页面里面元素的位置会变化而大小不会变化。
    2、设计方法:使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验,在同一个设备下实际还是固定的布局。

    流式布局(Liquid Layout)

    流式布局(Liquid)的特点(也叫"Fluid") 是页面元素的宽度按照屏幕分辨率进行适配调整,但整体布局不变。代表作栅栏系统(网格系统)。
    网页中主要的划分区域的尺寸使用百分数(搭配min-*、max-*属性使用),例如,设置网页主体的宽度为80%,min-width为960px。图片也作类似处理(width:100%, max-width一般设定为图片本身的尺寸,防止被拉伸而失真)。
    1、布局特点:屏幕分辨率变化时,页面里元素的大小会变化而但布局不变。【这就导致如果屏幕太大或者太小都会导致元素无法正常显示】
    2、设计方法:使用%百分比定义宽度,高度大都是用px来固定住,可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整,尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。
    这种布局方式在Web前端开发的早期历史上,用来应对不同尺寸的PC屏幕(那时屏幕尺寸的差异不会太大),在当今的移动端开发也是常用布局方式,但缺点明显:主要的问题是如果屏幕尺度跨度太大,那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义,但是高度和文字大小等大都是用px来固定,所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长,但是高度、文字大小还是和原来一样(即,这些东西无法变得“流式”),显示非常不协调。

    响应式布局(Responsive Layout)

    随着CSS3出现了媒体查询技术,又出现了响应式设计的概念。响应式设计的目标是确保一个页面在所有终端上(各种尺寸的PC、手机、手表、冰箱的Web浏览器等等)都能显示出令人满意的效果,对CSS编写者而言,在实现上不拘泥于具体手法,但通常是糅合了流式布局+弹性布局,再搭配媒体查询技术使用。——分别为不同的屏幕分辨率定义布局,同时,在每个布局中,应用流式布局的理念,即页面元素宽度随着窗口调整而自动适配。即:创建多个流体式布局,分别对应一个屏幕分辨率范围。可以把响应式布局看作是流式布局和自适应布局设计理念的融合。
    响应式几乎已经成为优秀页面布局的标准。
    *原理:*通过媒体查询来定制某个宽度区间的网页布局
    2、设计方法:媒体查询+流式布局。通常使用 @media 媒体查询 和网格系统 (Grid System) 配合相对布局单位进行布局,实际上就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。
    *优点:*1.面对不同的分辨率设备灵活性强
    2.能够快速的解决多设备显示的适应问题
    3.适合中小型网站
    *缺点:*1.兼容于各种设备工作量大,效率降低
    2. 代码累赘,以及加载事件过长

    响应式布局的使用

    语法: @media媒体类型关键字 媒体特性(即媒体条件) {样式代码}

    @media screen and (max-width:1200px){
    	.c-nav ul li{
    		margin-left: 20px;
    	}
    }
    @media screen and (max-width:992px){
    	.c-nav ul li{
    		margin-left: 10px;
    	}
    }
    @media screen and (max-width:768px){
    	.c-nav ul li:nth-child(4),.c-nav ul li:nth-child(5){
    		display: none;
    	}
    }
    @media screen and (max-width:576px){
    	.c-nav{
    		background-color:rgba(176,204,243,0.8);
    		padding: 10px 0px 10px 0px;
    		opacity: 0.9;
    	}
    	.c-nav .navFlex{
    		flex-wrap:wrap;
    		font-size: 20px;
    		justify-content: space-between;
    	}
    	.c-nav .logo{
    		height: 30px;
    	}
    	.c-nav ul li{
    		padding-top: 10px;
    		margin-left: 0px;
    		display: block;
    	}
    	.c-nav ul li a{
    		border-bottom: 3px solid transparent;
    	}
    	.c-nav ul a:hover{
    		border-bottom: 3px solid #e4c17e;
    	}
    	.c-nav ul li:nth-child(4),.c-nav ul li:nth-child(5){
    		display: block;
    	}
    	.c-nav .hiden{
    		display: block;
    	}
    	.c-nav .show{
    		width: 100%;
    		font-size: 14px;
    		text-align: center;
    		display: none;
    	}
    }
    

    弹性布局(flexible layout)

    弹性布局,又称“Flex布局”,是由W3C于2009年推出的一种布局方式。可以简便、完整、响应式地实现各种页面布局。而且已经得到所有主流浏览器的支持。

    >>> 了解两个基本概念,接下来会频繁提到:

    • 容器: 需要添加弹性布局的父元素;
    • 项目: 弹性布局容器中的每一个子元素,称为项目;

    >>> 了解两个基本方向,这个牵扯到弹性布局的使用:

    • 主轴: 在弹性布局中,我们会通过属性规定水平/垂直方向为主轴;
    • 交叉轴: 与主轴垂直的另一方向,称为交叉轴。

    弹性布局的使用

    • 给父容器添加display: flex/inline-flex;属性,即可使容器内容采用弹性布局显示,而不遵循常规文档流的显示方式;
    • 容器添加弹性布局后,仅仅是容器内容采用弹性布局,而容器自身在文档流中的定位方式依然遵循常规文档流;
    • display:flex; 容器添加弹性布局后,显示为块级元素;
    • display:inline-flex; 容器添加弹性布局后,显示为行级元素;
    • 设为 Flex布局后,子元素的float、clear和vertical-align属性将失效。但是position属性,依然生效
    .box {
                display: flex;
                justify-content: space-between;
              }
    

    rem布局

    ** em、rem、meta标签的基本概念**
    em 是一个布局的长度单位,当前对象内文本的字体大小的相对单位,也就是说相对于当前元素的font-size。

    rem 是(根)字体大小相对单位,也就是说跟当前元素的font-size没有关系,而是跟整个body的font-size有关系。

    meta标签,我们可以指定浏览器的适口,适口就是可以看见的区域

    更多相关内容
  • 一、静态布局(Static Layout) 即传统Web设计,网页上的所有元素的尺寸一律使用px作为单位... PC:居中布局,所有样式使用绝对宽度/高度(px),设计一个Layout,在屏幕宽高有调整时,使用横向竖向的滚动条来查阅被遮

    一、静态布局(Static Layout)
    即传统Web设计,网页上的所有元素的尺寸一律使用px作为单位。

    1、布局特点:不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态(定宽度)布局的,也就是设置了min-width,这样的话,如果小于这个宽度就会出现滚动条,如果大于这个宽度则内容居中外加背景,这种设计常见与pc端。
    2、设计方法:
      PC:居中布局,所有样式使用绝对宽度/高度(px),设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分;
      移动设备:另外建立移动网站,单独设计一个布局,使用不同的域名如wap.或m.。

    在移动端开发中采用静态布局的两种方式:(来自:流布局与响应式网页设计有什么区别?)

    (1)在viewport meta标签上设置width=320,页面的各个元素也采用px作为单位。通过用JS动态修改标签的initial-scale使得页面等比缩放,从而刚好占满整个屏幕。(见前端开发-web app 变革之rem)

    (2)设在viewport meta标签上设置content"width=640,user-scalable=no,页面的各个元素也采用px作为单位。由于640px超出了手机宽度,浏览器会自动缩小页面至刚好全屏。(具体见content"width=640,user-scalable=no" 然后再进行固定尺寸的px设计? - 前端开发)

    优点:这种布局方式对设计师和CSS编写者来说都是最简单的,亦没有兼容性问题。

    缺点:显而易见,即不能根据用户的屏幕尺寸做出不同的表现。

    当前,大部分门户网站、大部分企业的PC宣传站点都采用了这种布局方式。固定像素尺寸的网页是匹配固定像素尺寸显示器的最简单办法。但这种方法不是一种完全兼容未来网页的制作方法,我们需要一些适应未知设备的方法。

    二、流式布局(Liquid Layout)

    流式布局(Liquid)的特点(也叫"Fluid") 是页面元素的宽度按照屏幕分辨率进行适配调整,但整体布局不变。代表作栅栏系统(网格系统)。

    网页中主要的划分区域的尺寸使用百分数(搭配min-*、max-*属性使用),例如,设置网页主体的宽度为80%,min-width为960px。图片也作类似处理(width:100%, max-width一般设定为图片本身的尺寸,防止被拉伸而失真)。

    1、布局特点:屏幕分辨率变化时,页面里元素的大小会变化而但布局不变。【这就导致如果屏幕太大或者太小都会导致元素无法正常显示】

    2、设计方法:使用%百分比定义宽度,高度大都是用px来固定住,可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整,尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。

    这种布局方式在Web前端开发的早期历史上,用来应对不同尺寸的PC屏幕(那时屏幕尺寸的差异不会太大),在当今的移动端开发也是常用布局方式,但缺点明显:主要的问题是如果屏幕尺度跨度太大,那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义,但是高度和文字大小等大都是用px来固定,所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长,但是高度、文字大小还是和原来一样(即,这些东西无法变得“流式”),显示非常不协调。

    三、自适应布局(Adaptive Layout)
    自适应布局的特点是分别为不同的屏幕分辨率定义布局,即创建多个静态布局,每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态局部(页面元素位置发生改变),但在每个静态布局中,页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。
    1、布局特点:屏幕分辨率变化时,页面里面元素的位置会变化而大小不会变化。
    2、设计方法:使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验,在同一个设备下实际还是固定的布局。

    四、响应式布局(Responsive Layout)

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

    响应式几乎已经成为优秀页面布局的标准。

    1、布局特点:每个屏幕分辨率下面会有一个布局样式,即元素位置和大小都会变。

    2、设计方法:媒体查询+流式布局。通常使用 @media 媒体查询 和网格系统 (Grid System) 配合相对布局单位进行布局,实际上就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。

    优点:适应pc和移动端,如果足够耐心,效果完美

    缺点:(1)媒体查询是有限的,也就是可以枚举出来的,只能适应主流的宽高。(2)要匹配足够多的屏幕大小,工作量不小,设计也需要多个版本。

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

    总结:

    响应式与自适应的原理是相似的,都是检测设备,根据不同的设备采用不同的css,而且css都是采用的百分比的,而不是固定的宽度,不同点是响应式的模板在不同的设备上看上去是不一样的,会随着设备的改变而改变展示样式,而自适应不会,所有的设备看起来都是一套的模板,不过是长度或者图片变小了,不会根据设备采用不同的展示样式,流式就是采用了一些设置,当宽度大于多少时怎么展示,小于多少时怎么展示,而且展示的方式向水流一样,一部分一部分的加载,静态的就是采用固定宽度的了。

    流式布局是用于解决类似的设备不同分辨率之间的兼容(一般分辨率差异较少);响应式是用于解决不用设备之间不用分辨率之间的兼容问题(一般是指PC,平板,手机等设备之间较大的分辨率差异)。

    如何实现响应式布局:折腾响应式布局设计,应运而生的web页面响应布局

    五、弹性布局(rem/em布局)

    参考:流布局与响应式网页设计有什么区别?
    1、rem,em区别:rem,em都是顺应不同网页字体大小展现而产生的。其中,em是相对其父元素,在实际应用中相对而言会带来很多不便;而rem是始终相对于html大小,即页面根元素。

    2、使用 em 或 rem 单位进行相对布局,相对%百分比更加灵活,同时可以支持浏览器的字体大小调整和缩放等的正常显示,因为em是相对父级元素的原因没有得到推广。【中国站点制作网页的时候,习惯用CSS强制定义字体大小,保证每个人都看到一致的效果,包括网易、搜狐这些门户网站在内的大部分站点,用的都是绝对单位px(像素)。但是,如果从网站易用性方面考虑,字体大小应该是可变的,一些视力不是那么好的人需要放大字体才能看得清页面内容。然而,占据大部分浏览器市场的IE无法调整那些使用px作为单位的字体大小。国外人士非常重视网站的易用性,相当一部分外国站点已经使用em作为字体单位。】
    3、这类布局的特点是,包裹文字的各元素的尺寸采用em/rem做单位,而页面的主要划分区域的尺寸仍使用百分数或px做单位(同「流式布局」或「静态/固定布局」)。早期浏览器不支持整个页面按比例缩放,仅支持网页内文字尺寸的放大,这种情况下。使用em/rem做单位,可以使包裹文字的元素随着文字的缩放而缩放。

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

    Set body font-size to 62.5% for Easier em Conversion:
    If you would like to use relative units (em) for your font sizes, declaring 62.5% for the font-size property of the body will make it easier to convert px to em. By doing it this way, converting to em is a matter of dividing the px value by 10 (e.g. 24px = 2.4em).
    那么为什么一般多是 html{font-size:62.5%;} 而不是 html{font-size:10px;}呢?

    因为有些浏览器默认的不是16px,或者用户修改了浏览器默认的字体大小(因浏览器分辨率大小,视力,习惯等因素)。如果我们将其设置为10px,一定会影响在这些浏览器上的效果,所以最好用绝大多数用户默认的16作为基数 * 62.5% 得到我们需要的10px。

    html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
    body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
    h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}
    

    实际项目设置成 font-size: 62.5%可能会出现问题,因为chrome不支持小于12px的字体,计算小于12px的时候,会默认取12px去计算,导致chrome的em/rem计算不准确。

    针对这个现象,可以尝试设置html字体为100px,body 修正为16px,这样 0.1rem 就是 10px,而body的字体仍然是默认大小,不影响未设置大小的元素的默认字体的大小。

    5、用em/rem定义尺寸的另一个好处是更能适应缩进/以字体单位padding或margin/浏览器设置字体尺寸等情况(因为em/rem相对于字体大小,会同步改变)。例如:p{ text-indent: 2em; }

    6、使用rem单位的弹性布局在移动端也很受欢迎。
    工具ViewtoREM:PX转换到REM(自动预处理)
    rem的定义:font size of the root element,rem是相对于根元素来设置字体大小的,这就意味着,我们只需要根据自己的需求在根元素确定一个参考值。
    rem与em、px的区别:
    px:像素,比较精确的单位,但不好做响应式布局
    em:以父节点font-size大小为参考点,标准不统一,容易造成混乱
    REM支持的浏览器:Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。IE6-8无法支持。

    对于不同尺寸的屏幕,可以统一假设屏幕宽度为640px后编写CSS(当然你也可以假定统一为320px)。此时,我们设定html元素的font-size为40px(同样,只是举例),然后各处(元素尺寸、文字大小)使用rem作为单位,随后搭配媒体查询或JS,根据屏幕的大小来动态控制html元素的font-size(特定屏幕尺寸下,html元素的font-size应当设置为何值,是使用这个方案时设计师和程序员需要反复考虑后确定的,以下试举一段相关的CSS媒体查询代码),即可自动改变所有用rem定义尺寸的元素的大小(且CSS编写者在脑中进行换算的计算过程比em简单得多)。

    html {
        font-size : 20px;
    }
    @media only screen and (min-width: 401px){
        html {
            font-size: 25px !important;
        }
    }
    @media only screen and (min-width: 428px){
        html {
            font-size: 26.75px !important;
        }
    }
    @media only screen and (min-width: 481px){
        html {
            font-size: 30px !important; 
        }
    }
    @media only screen and (min-width: 569px){
        html {
            font-size: 35px !important; 
        }
    }
    @media only screen and (min-width: 641px){
        html {
            font-size: 40px !important; 
        }
    }
    

    其实在移动端使用所谓的弹性布局,是比较勉强的。移动端弹性布局流行起来的原因归根结底是rem单位对于(根据屏幕尺寸)调整页面的各元素的尺寸、文字大小时比较好用。其实,使用vw、vh等后起之秀的单位,可以实现完美的流式布局(高度和文字大小都可以变得“流式”),弹性布局就不再必要了。详细可参考:视区相关单位vw, vh…简介以及可实际应用场景

    以下优缺点参考:响应式设计和REM布局的对比(有疑问)

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

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

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

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

    rem布局:改变浏览器宽度,页面所有元素的高宽都等比例缩放,也就是大屏幕下导航是横的,小屏幕下还是横的只不过变小了。

    结论:

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

    展开全文
  • 响应式布局是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。 优点: 面对不同分辨率设备灵活性强 能够快捷解决多设备显示适应问题 缺点: 兼容各种设备工作量大,效率低下 代码累赘,会出现...

    响应式 Web 设计 - Viewport

    响应式布局是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。

    优点: 

    面对不同分辨率设备灵活性强

    能够快捷解决多设备显示适应问题

    缺点: 

    兼容各种设备工作量大,效率低下

    代码累赘,会出现隐藏无用的元素,加载时间加长

    其实这是一种折中性质的设计解决方案,多方面因素影响而达不到最佳效果

    一定程度上改变了网站原有的布局结构,会出现用户混淆的情况

    一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下:

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

    width:控制 viewport 的大小,可以指定的一个值,如 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。

    height:和 width 相对应,指定高度。

    initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。

    maximum-scale:允许用户缩放到的最大比例。

    minimum-scale:允许用户缩放到的最小比例。

    user-scalable:用户是否可以手动缩放。

    多网页都是基于网格设计的,这说明网页是按列来布局的。

    使用网格视图有助于我们设计网页。这让我们向网页添加元素变的更简单。

    响应式网格视图通常是 12 列,宽度为100%,在浏览器窗口大小调整时会自动伸缩。

    创建响应式网格视图

    首先确保所有的 HTML 元素都有 box-sizing 属性且设置为 border-box

    确保边距和边框包含在元素的宽度和高度间。

    12 列的网格系统可以更好的控制响应式网页。

    首先我们可以计算每列的百分比: 100% / 12 = 8.33%

    在每列中指定 class class="col-" 用于定义每列有几个 跨度:

    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
    

    响应式 Web 设计 - 媒体查询

    使用 @media 查询来制作响应式设计

    如果         窗口小于 500px, 背景将变为浅蓝色:

    @media only screen and (max-width: 500px) {
        body {
            background-color: lightblue;
        }
    }

    基本的布局方法——Flex布局

    flex不单是一个属性,它包含了一套新的属性集。属性集包括用于设置容器,和用于设置项目两部分。
    设置容器的属性有:
    display:flex;
    
    flex-direction:row(默认值) | row-reverse | column |column-reverse
    flex-wrap:nowrap(默认值) | wrap | wrap-reverse
    justify-content:flex-start(默认值) | flex-end | center |space-between | space-around | space-evenly
    align-items:stretch(默认值) | center  | flex-end | baseline | flex-start
    align-content:stretch(默认值) | flex-start | center |flex-end | space-between | space-around | space-evenly
    设置项目的属性有:
    order:0(默认值) | <integer>
    flex-shrink:1(默认值) | <number>
    flex-grow:0(默认值) | <number>
    flex-basis:auto(默认值) | <length>
    flex:none | auto | @flex-grow @flex-shrink @flex-basis
    align-self:auto(默认值) | flex-start | flex-end |center | baseline| stretch
    

    例:

    父元素是lu子元素是li,则lu是容器,li是项目

    ul属性:display:flex。则ul为容器,li是项目成为弹性布局。

    展开全文
  • 功能简介:自媒体查询、rem布局、响应式布局技术,是三个不同的技术。...响应式布局 它是在页面宽度改变时,整个页面或者页面中的局部随着页面的缩放进行响应并实时变化(响应式布局和自媒体查询有...

    功能简介:

    自媒体查询、rem布局、响应式布局技术,是三个不同的技术。 自媒体查询 常用在适配不同的设备显示场景下,根据屏幕大小显示不同页面,但功能大致不变的这么一个技术。rem布局 它是一个长度单位,这个长度单位是根据‘根元素’的字体大小的单位确定的(根元素字体大小 = 1rem)。响应式布局 它是在页面宽度改变时,整个页面或者页面中的局部随着页面的缩放进行响应并实时变化(响应式布局和自媒体查询有区别)。在如今复杂的开发中这几个技术越来越密不可分,在项目中可以通过实际需求进行搭配。

    自媒体查询:

    功能:自媒体查询主要是设置不同的设备屏幕下的显示样式。

    获取浏览器或设备宽度:

    min-device-width (设备的宽度)\   min-width  (浏览器的宽度)   (注释:也可以获取高度,就是将width改写成height)

    方法:公共部分:

    内部样式引用(可以编写多组):

    1、

    2、 外部样式引用(可以引用多个外部样式表):

    1、

    flex弹性布局:

    功能:

    就是使用flex对页面进行布局,也可以是响应式的。

    方法:   一下方法为flex常用方法,具体学习可以点击链接  flex布局作用在父元素的方法:

    flex-direction:  设置主轴方向

    flex-wrap:  是否让子元素换行

    justify-content:设置主轴对齐方式

    align-items:  设置交叉轴的对齐方式

    作用在子元素的方法(简写):

    flex:参数一(数字)、参数二

    (数字)

    、参数三(px / %)

    参数一:子元素平分多余父元素的空间。     参数二:子元素按比例压缩超出父元素的宽度。      参数三:设置该元素的宽。

    ab4bc43f9957

    rem的使用方法

    概念:指相对跟元素的字体大小的单位。(补充:rem于em的区别一个是以根元素字体大小为参考,em是以父级元素为参考)

    使用方法:

    一般使用媒体查询+rem或js,在不同宽度的窗口下自动调节字体大小。手动设定:

        1rem = 18pxjs方式自适应:

    const c = ()=>{

    let w = document.documentElement.clientWidth; // 获取设备的宽度

    let n = (20*(w/320)>40?40+'px':(20*(w/320)+'px')) //20为参数  320设备宽度  40显示最大字号

    document.documentElement.style.fontSize = n        // 设置根字体大小

    }

    window.addEventListener('load',c)     //初始值

    window.addEventListener('resize',c)     //屏幕改变的是的值

    自适应布局

    布局特点:不同设备对应不同的HTML或者局部自适应。(不同的设备不同的页面)js实现方法:

    const redireat = ()=>{

    let userAgent = nevigator.userAgent.toLowerCase()   //获取设备信息

    let device = /ipad|iphone|midp|rv:1.2.3.4|ucwed|android|windows ce|windows mobile/   //适配不同设备

    if(derice.test(userAgent)){

    window.location.href = 'move.html'  //跳转移动端页面

    }else{

    window.location.href='pc.html'   //跳转PC端页面

    }

    }

    redireat()

    响应式布局

    布局特点:确保一个页面在所有终端上,都能显示出令人满意的效果。(一套方案,处处运行。)

    设计思路:使用自媒体查询及用 % 或 rem 作为单位,对不同视口设备进行编写样式。

    rem弹性布局

    布局特点:为了保证在各种屏幕上得不失真,就要根据实际屏幕宽度做等比换算。(一套方案,是不同尺寸、分辨率的视口呈现出较好的效果。)

    设计思路:使用自媒体查询及用 % 或 rem 作为单位,对不同视口设备进行编写样式。

    总结:

    在项目开发中,根据项目的实际情况选择不同的技术的搭配,这样才能实现业务的效果。

    展开全文
  • 下面小编就为大家带来一篇响应式布局的简单案例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,祝大家游戏愉快哦
  • 一、静态布局页上的所有元素的尺寸一律使用px作为单位1.布局特点不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态(定宽度)布局的,也就是设置了min-width,这样的话,...
  • 一、响应式布局 1.媒体查询排序问题: 使用 @media (min-width: 像素值)时,像素值应按照从小到大的顺序排列,例如: @media (min-width: 768px) @media (min-width: 1024px) @media (min-width: 1200px) 使用@media...
  • 1、怪异盒模型的简介 2、弹性盒模型相关概念 3、Flex容器属性(添加在父级元素上的) ...4、Flex项目属性(添加在子元素上的) ...6、Responsive web design 响应式设计布局概念 7、CSS3多列布局
  • 静态布局、流式布局、自适应布局、弹性布局响应式布局 前端的布局主要有: 静态布局、流式布局、自适应布局、弹性布局响应式布局等。 一、静态布局: 尺寸上一律使用px;同时限制外层容器的大小;中间的宽度有...
  • 2 流动布局 3 弹性布局 4 自适应布局 5 响应式布局 1 固定布局 又称静态布局。 由于最开始时人们之间显示器的屏幕大小没有什么差异,因此以像素作为基本单位的布局方式在当时很流行。特点就是宽度都是固定的,所以...
  • Flex弹性布局 Flex 布局概念 精确灵活控制块级盒子的布局,避免浮动布局中的脱标现象。 非常适合结构化布局。 父元素添加 display: flex,子元素可自动地挤压或拉伸。此时父元素称为弹性容器,子元素称为弹性盒子 ...
  • 下面总结常见的响应式布局的分类: @media screen and (max-width:320px){ #talkFooter .editArea{…… } } @media screen and (min-width:321px) and (max-width:375px){ #talkFooter .editArea{…… } } @media...
  • 响应式布局弹性布局基础篇

    千次阅读 2017-08-13 22:44:00
    响应式布局弹性布局 一.响应式布局 1.响应式布局的概念 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念...
  • 一、静态布局(Static Layout) 即传统Web设计,网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点:不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态(定...
  • 一、静态布局(Static Layout) 即传统Web设计,网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点:不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态(定宽度...
  • CSS3弹性盒模型可以轻松的创建自适应浏览器流动窗口的布局或自适应字体大小的布局。同时该盒子决定了一个盒子在其他盒子的分布方式,及如何处理可用的空间。自己写了一个弹性盒子的demo:主要HTML代码:1234CSS代码...
  • #静态布局 ##静态布局的概念: 静态布局常见于pc端,不管浏览器尺寸是多少,都按照最开始布局的大小显示,常用单位为px。 ##静态布局的缺点: 需要计算好页面大小以及在布局中不同标签的大小,所以容易造成页面没有...
  • 八、响应式布局 1、百分比布局 (1)子元素的宽高百分比设置: ①手动计算百分比 width:30% ②利用计算函数属性, width:calc(子元素宽 / 父宽 * 100% ) 运算符号前后空格,计算高同理 (2)版心的百分比布局...
  • 2)响应式布局和自适应布局的区别(面试问题) 响应式布局只开发一套代码,通过检测视口的分辨率,针对不客户端在客户端做代码处理,来展现不同的布局内容; 自适应需要开发多套界面,通过检测视口的分辨率,来...
  • 3.所有容器使用相对尺寸(%),所有文字使用相对尺寸(rem/em),所有图片使用相对尺寸(将图片设置为响应式图片max-width:100%;height:auto) 4.CSS3媒体查询技术 媒体查询技术两种使用方法: 1.根据媒体查询结果执行不同...
  • 2)响应式布局和自适应布局的区别 a.响应式布局只开发一套代码,通过检测视口的分辨率,针对不同客户端在客户端做代码处理,来体现不同的布局内容。 自适应开发需要开发多套界面,通过检测视口的分辨率,来判断...
  • 响应式布局是一个网站能够兼容多个终端 而不是为每个终端做一个特定 的版本。优点: 面对不同分辨率设备灵活性强 能够快捷解决多设备显示适应问题 缺点: 兼容各种设备工作量大,效率低下 代码累赘,会出现隐藏无用...
  • PC:居中布局,所有样式使用绝对宽度/高度(px),设计一个Layout,在屏幕宽高有调整时,使用横向竖向的滚动条来查阅被遮掩部分; 移动设备:另外建立移动网站,单独设计一个布局,使用不同的域名如wap.或m. 流式...
  • CSS3弹性媒体查询、响应式布局

    千次阅读 2018-12-12 08:58:50
    Flexbox布局(Flexible Box)模块(目前处于W3C工作草案)旨在提供一个更佳有效的布局方式,更好的控制项目的对齐自由分配容器空间,即使它们的大小是未知的或动态的。因此得其名&amp;amp;amp;amp;amp;quot;flex...
  • flex布局一、容器的属性1.flex-direction属性2.flex-wrap属性3.flex-flow4.justify-content...2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。 采用 Flex 布局的元素,称为

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,991
精华内容 5,596
关键字:

弹性布局和响应式布局的区别