Web网页布局的主要方式

一、静态布局(static layout)

  即传统Web设计,网页上的所有元素的尺寸一律使用px作为单位。

1、布局特点

  不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态(定宽度)布局的,也就是设置了min-width,这样的话,如果小于这个宽度就会出现滚动条,如果大于这个宽度则内容居中外加背景,这种设计常见于pc端。

2、设计方法

  PC:居中布局,所有样式使用绝对宽度/高度(px),设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分;
  移动设备:另外建立移动网站,单独设计一个布局,使用不同的域名如wap.或m.。

优点:这种布局方式对设计师和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 ">复制代码

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

  1. rem/em区别:rem是相对于html元素的font-size大小而言的,而em是相对于其父元素。

  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,方便了计算。

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

  6. 使用rem单位的弹性布局在移动端也很受欢迎。

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

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

 

参考文章: www.cnblogs.com/zhuzhenwei9…

转载于:https://juejin.im/post/59f706a8f265da43094471a7

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/257158.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HDU 3966 Aragorn's Story (树链点权剖分,成段修改单点查询)

题目链接&#xff1a;http://acm.hdu.edu.cn/showproblem.php?pid3966 树链剖分的模版&#xff0c;成段更新单点查询。熟悉线段树的成段更新的话就小case啦。 1 //树链剖分 边权修改 单点查询2 #include <iostream>3 #include <cstring>4 #include <algorithm&…

微信分享无响应的解决

微信分享无响应的解决 最近使用友盟的社会化分享&#xff0c;集成到程序中进行分享功能的开发。 可是一开始还是可以正常使用&#xff0c;今天突然发现微信分享&#xff08;好友分享和朋友圈分享&#xff09;均是点击没有响应&#xff0c;也就是点击后&#xff0c;没有任何回馈…

x64电脑连接x32共享打印机

下载64位打印机驱动到64位电脑&#xff0c;在连接32位共享打印机出错时出现在本地寻找相关inf文件&#xff0c;此时将64位打印机驱动解压(不在64位本地安装)并找到相应inf文件&#xff0c;载入即可连接成功。

HTML中的br标签讲解(菜鸟)

br标签&#xff1a;如何在HTML中换行&#xff1f;可以使用br标签 1.br标签作用&#xff1a;换行 2.br标签格式&#xff1a;<br/> 3.br标签的注意点&#xff1a; 3.1多个br标签可以连续使用&#xff0c;使用了多少个br标签就会换多少行 3.2由于HTML的作用就是用来给文本添…

Cocos2d-3.x版的HelloWorld工程分析 (二)

我们HelloWorld 从applicationDidFinishLaunching()后&#xff0c; 大部分人都会从这部分代码开始研究&#xff0c;如果想要研究main函数 如何调用applicationDidFinishLaunching() 传送门 http://blog.csdn.net/hiwoshixiaoyu/article/details/51472707 #include "App…

安卓中bundle的使用

Bundle类用作携带数据&#xff0c;它类似于Map&#xff0c;用于存放key-value形式的值&#xff0c;相对于Map&#xff0c;它提供了各种常用类型的putXxx()/getXxx()方法&#xff0c;Bundle的内部实际上是使用了HashMap类型的变量来存放PutXxx()方法存入的值。 SDK里是这样描述&…

NO.1 python_人工智能_学习路线

***##学习路线&#xff1a;* 1.python基础 计算机组成原理、python开发环境、python变量、流程控制语句、文件操作、异常处理、模块与包、飞机大战游戏制作等 2.python高级应用 网络编程、并发编程、数据库编程、正则表达式、Linux系统应用、函数的高级应用、python的语法进阶…

wds+mdt 分布式自动部署 操作系统

一、 安装准备 1、工具的准备 首先介绍本次项目所涉及到的内容&#xff1a; MDT Microsoft Deployment Toolkit 2012&#xff08;简称MDT 2012&#xff09;是微软最新一代部署工具&#xff0c;通过它可以自动完成桌面和服务器部署的推荐操作进程和工具&#xff0c;MDT主要…

iOS开发网络篇—数据缓存

iOS开发网络篇—数据缓存 一、关于同一个URL的多次请求 有时候&#xff0c;对同一个URL请求多次&#xff0c;返回的数据可能都是一样的&#xff0c;比如服务器上的某张图片&#xff0c;无论下载多少次&#xff0c;返回的数据都是一样的。 上面的情况会造成以下问题 &#xff08…

[WinError 10061] 由于目标计算机积极拒绝,无法连接错误解决办法

爬虫的时候会经常出现"[WinError 10061] 由于目标计算机积极拒绝&#xff0c;无法连接"错误这种情况&#xff0c;有可能是LAN口设置不正确 我是在爬取全国天气情况的时候出现的这种错误&#xff0c;后面调了以后可以了1.控制面板——网络和 Internet—— Internet选项…

Chrome浏览器设置小窗口视频

快捷工具先安装1.28版本后用1.31版本替换&#xff0c;以实现视频弹窗和双击关闭标签页功能。 首先下载Chrome扩展快捷工具1.28版的CRX安装包&#xff1a;http://pan.baidu.com/s/1pJ4T4td&#xff1b; 然后拖放到chrome扩展管理页面中安装。 接着&#xff0c;下载打包好的快捷…

这门课有什么用?

每个老师都苦恼于学生常问的问题&#xff1a;“某某课学了有什么用&#xff1f;”老师费劲巴拉解释一通&#xff0c;结果还是&#xff1a;然并卵。 一门课有什么用&#xff0c;很难解释得令人信服&#xff0c;因为这和人的认知水平有关。认知水平达不到&#xff0c;解释的多深入…

NO.1_python_scrapy组成爬取多页数据连接数据库配置文件书写

scrapy框架组成及各部分作用 item pipelines: 用于存放需要存储数据的数据模型&#xff0c;一般格式为&#xff1a; #需要存储多少中类型的数据就写多少行&#xff0c;一般是key_value组合 数据名称&#xff0c;即key scrapy.Field()spiders 用于解析返回来的response im…

“智云大咖秀”:大咖摄影师谈惊艳亮相的“大咖级”设备

古人云&#xff0c;善书者不择笔。 古人又云&#xff0c;工欲善其事必先利其器。 古人很矛盾。 这两句话如果用在影像创作这个领域&#xff0c;可以说都有道理&#xff1a;没有好的设备&#xff0c;创意大师一样能够拍出足够惊艳的作品&#xff1b;有足够强的设备&#xff0c;但…

英语 用on还是/at/还是in

in prep. 1. [表示地点、场所、位置等]在…里面&#xff1b;在…内部&#xff1b;在…上&#xff1a;例句: in the room 在房间里 2. [表示时间]在…期间&#xff1b;在(一段时间)以内&#xff1b;过…之久&#xff1a;例句: in summer 在夏天in 3. [表示状态]在…状态中&…

js编写简易返回顶部按钮

之前ui设计让我做个返回顶部的按钮,我一定头绪都没,感觉真要加上这个功能,自己编写就得一个下午,工作量大为由,所以就推脱了; 当静下心,有时间捣鼓之后才发现原来so easy!!! 以下是我的js代码,不足之处还请博友们批评指正; //原生js操作代码  function scrolls(){   v…

NO.2_python_scrapy_反爬虫(随机请求头IP代理)取消链接去重

1.随机请求头 # -*- coding: utf-8 -*- """ 所有请求头的USER_AGENTS网址 http://www.useragentstring.com/pages/useragentstring.php?nameAll """ import json import random import requestsUSER_AGENTS [Mozilla/5.0 (Windows NT 10.0; W…

Cobub无码埋点关键技术的实现

随着大数据时代的到来&#xff0c;数据采集也已经变的越来越重要。前端埋点作为一个比较成熟的数据接入手段被广泛应用着。目前埋点分为两种方式&#xff0c;有码与无码埋点。有码埋点比较容易理解&#xff0c;即调用SDK的API&#xff0c;在代码中插入埋点的相关代码&#xff0…

Dedesql数据库类详解(二次开发必备教程)(转)

http://www.dedecms.com/help/development/2009/1028/1076.html 织梦DedeCMS的二次开发不仅仅是会写写织梦的标签&#xff0c;会制作织梦的模板。很多时候&#xff0c;我们需要对织梦DedeCMS的数据库进行查询、插入、删除等等之类的操作&#xff0c;进行这一类的操作之前&#…

装系统换固态硬盘方法

1、将买回的固态硬盘直接换上电脑的原先机械硬盘 2、或者将自己的光驱拆卸&#xff0c;将固态硬盘装上去 3、电脑进入boss 界面&#xff0c;找到boot(引导)栏&#xff0c;找到自己的u盘&#xff0c;进入后先分区&#xff0c;然后再重启&#xff0c; 然后再进入BOSS进入U盘里&…