• 布局的几种形式



    (静态布局、流式布局、自适应布局、响应式布局、弹性布局)
     
    一、静态布局
    页上的所有元素的尺寸一律使用px作为单位
    1.布局特点
    不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示。
    常规的pc的网站都是静态(定宽度)布局的,也就是设置了min-width,这样的话,
    如果小于这个宽度就会出现滚动条,如果大于这个宽度则内容居中外加背景,这种设计常见于pc端
    2.设计方法
    PC:居中布局,所有样式使用绝对宽度/高度(px),设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分
    优点:这种布局方式对设计师和CSS编写者来说都是最简单的,亦没有兼容性问题。
    缺点:显而易见,即不能根据用户的屏幕尺寸做出不同的表现。当前,大部分门户网站、大部分企业的PC宣传站点都采用了这种布局方式。
    二、流式布局
    流式布局的特点 是页面元素的宽度按照屏幕分辨率进行适配调整,但整体布局不变。代表作栅栏系统 网格系统
    1. 布局特点
    屏幕分辨率变化时,页面里元素的大小会变化而但布局不变
    2. 设计方法
    使用%百分比定义宽度,高度大都是用px来固定住
    缺点明显:主要的问题是如果屏幕尺度跨度太大,那么在相对其原始设计而言过小或过大的屏幕上不能正常显示
    三、自适应布局
    自适应布局的特点是分别为不同的屏幕分辨率定义布局,即创建多个静态布局,每个静态布局对应一个屏幕分辨率范围。
    改变屏幕分辨率可以切换不同的静态局部(页面元素位置发生改变),但在每个静态布局中,
    页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。
    1、布局特点
    屏幕分辨率变化时,页面里面元素的位置会变化而大小不会变化。
    2、设计方法
    使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。
    在优秀的响应范围设计下可以给适配范围内的设备最好的体验,在同一个设备下实际还是固定的布局。
    四、响应式布局
    1. 布局特点
    每个屏幕分辨率下面会有一个布局样式,即元素位置和大小都会变
    2. 设计方法
    媒体查询+流式布局。
    优点:适应pc和移动端,如果足够耐心,效果完美。
    缺点:(1)媒体查询是有限的,也就是可以枚举出来的,只能适应主流的宽高。
    (2)要匹配足够多的屏幕大小,工作量不小,设计也需要多个版本。
    五、弹性布局(rem/em布局)
    1. rem/em区别:rem是相对于html元素的font-size大小而言的,而em是相对于其父元素
    2. 使用 em 或 rem 单位进行相对布局,相对%百分比更加灵活,同时可以支持浏览器的字体大小调整和缩放等的正常显示
    3. 浏览器的默认字体高度一般为16px,即1em:16px,但是 1:16 的比例不方便计算,为了使单位em/rem更直观,
    CSS编写者常常将页面跟节点字体设为62.5%,比如选择用rem控制字体时,先需要设置根节点html的字体大小,
    因为浏览器默认字体大小16px*62.5%=10px。这样1rem便是10px,方便了计算。
    结论
    1.如果只做pc端,那么静态布局(定宽度)是最好的选择;
    2.如果做移动端,且设计对高度和元素间距要求不高,那么弹性布局(rem+js)是最好的选择,一份css+一份js调节font-size搞定;
    3.如果pc,移动要兼容,而且要求很高那么响应式布局是最好的选择,前提是设计根据不同的高宽做不同的设计,响应式根据媒体查询做不同的布局。


  • 相关阅读:
    MAVEN flex
    计算几何--判断点是否在矩形里
    Maven copy方式列举
    配置 IntelliJ IDEA VM options
    解决访问StackOverFlow太慢的问题
    Android sdk manager 更新 5.0 太难了,终于解决
    为OS X增加环境变量
    激活老电脑的第二春:内存盘为Chrome浏览器做缓存
    Android启动外部应用的方法
    在Activities之间导航
  • 原文地址:https://www.cnblogs.com/bigbang66/p/13501286.html
Copyright © 2020-2023  润新知