几种页面布局方式的简单说明

一、静态布局

最传统的web页面布局设计,常应用于PC端页面,即网页上的所有元素都统一使用px作为单位。这种设计页面的高度和宽度固定,超出浏览器的部分使用滚动条查阅。

特点:设计简单,但对于不同尺寸屏幕的兼容性不好,特别是移动端。

二、流式布局

页面元素以百分比的形式设置,元素宽高能够按照屏幕分辨率适应调整,但整体的布局不变。

特点:页面元素宽高可以自适应调整,但屏幕尺度跨度过大的情况下,页面不能正常显示。比如我们以百分比设置了按钮的宽度,但按钮上文字的大小是用px来设置的,当屏幕尺寸变大时,按钮被拉宽而字体大小没变,这样就会显得很不协调。

三、自适应布局

自适应布局主要是应用媒体查询@media针对不同尺寸和分辨率的设备设置不同的样式,就相当于创建了多个静态布局,每一个静态布局对应一个尺寸范围的屏幕。但对于同一个设备而言还是静态布局。

特点:屏幕尺寸或分辨率变化时,页面元素会跟着变化;但页面元素不会随着窗口大小的调整而发生变化。

四、弹性布局

弹性布局又称为盒子布局或flex布局,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为 Flex 布局。 给父容器添加display: flex/inline-flex;属性,即可使容器内容采用弹性布局显示,而不遵循常规文档流的显示方式;设为flex布局以后,子元素的float、clear和vertical-align属性将失效!

采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。

容器最核心的6个属性:

flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content

项目的6个核心属性:

order, flex-grow, flex-shrink, flex-basis, flex, align-self

五、响应式布局

响应式布局就是实现不同屏幕分辨率的终端上浏览网页的不同展示方式。响应式网页设计就是一个网站能够兼容多个终端-而不是为每个终端做一个特定的版本。

设计步骤:

1、设置meta标签

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

2、使用媒体查询和flex设置样式

body{
    background-color: grey;
}
@media screen and (min-width:1200px){
    body{
        background-color: pink;
    }
}
@media screen and (min-width:700px) and (max-width:1200px){
    body{
        background-color: blue;
    }
}
@media screen and (max-width:700px){
    body{
        background-color: orange;
    }
}

3、使用rem单位设置font-size

html{
    font-size:100px;//1rem=100px
}

完成后,就可以定义响应式字体:

@media (min-width:640px){body{font-size:1rem;}}
@media (min-width:960px){body{font-size:1.2rem;}}

4、使用max-width设置图片样式

原文地址:https://www.cnblogs.com/fengyuexuan/p/11151964.html

时间: 2024-11-11 00:10:46

几种页面布局方式的简单说明的相关文章

Web页面布局方式小结

事实上,本文是在Peter Jerde的How much information can be stored by ordering 52 playing cards文章基础上翻译.改编和扩展而来的.当然这是经过Jerde本人首肯的. 注意本文方法并非最优,也没有完全利用所有的信息空间,只是简单的尝试. 有数字的地方就有信息.所以扑克牌中保存信息不是什么新鲜事. PDF文档点这里:下载 原文(英文)点这里:访问 这里有两个DEMO. 编码DEMO,解码DEMO 首先是"DEEP IN SHALL

30分钟掌握这8种页面布局

30分钟掌握这8种页面布局 学习UI设计的时候,经常要接触到页面的布局,布局的方式会直接影响一个APP的视觉效果,好的布局方式,往往能带来舒服的视觉效果,更能得到用户的接受与好评.然而万变不离其宗,移动端页面常用的布局,不外乎以下8种. 1.列表式布局 特点:内容从上向下排列,导航之间的跳转要回到初始点 优点: 1.层次展示清晰明了 2.视线流从上到下,浏览体验快捷 3.可展示内容较长的菜单或拥有次级文字内容的标题 缺点: 1.导航之间的跳转要回到初始点,灵活性不高 2.同级内容过多时,用户浏览

HBuilder开发App教程08-几种页面打开方式

说明 上节说了list页面的实现,其中关于几种页面的打开方式没有详细述说, 本节详细述说下几种页面打开方式的区别. 几种打开页面的方式 1.初始化时创建子页面 2.直接打开新页面 3.预加载页面 示例 1.初始化时创建子页面 mui.init({ subpages: [{ url: your - subpage - url, //子页面HTML地址,支持本地地址和网络地址 id: your - subpage - id, //子页面标志 styles: { top: subpage - top

Python用户界面编程PyQt5的四种的布局方式

1.QT是C++编写的跨平台GUI库,GUI是指桌面程序应用. 2.开发基于pyqt5的桌面应用程序必须要使用两个类Qapplication和Qwidget类,都在PyQt5.Qt.widgets里面 3.pycharm里面讲QTdesigner文件产生的ui文件转换为.py文件需要使用pygui转换扩展工具,主要有以下两种方式:(1)python -m PyQt5.uic.pyuic filename.ui -o filename.py(2)直接调用anaconda里面安装的pyuic5即可(

常见页面布局方式(三种框架集)

frameset框架集 Frameset标签可定义一个框架集,它用来组织多个窗口(框架),每个框架有独立的html文档,在石油frameset是,不可以同时存在body标签,他和body标签是同级的. 多个框架组成了一个框架集 1 框架集标签(frameset)第一如何将窗口分割为框架 2 每个frameset 第一了一系列行货列 3 rows.columns的值规定了每行或每列占据屏幕的面积 frameset的一些属性 cols""把一个浏览器窗口按列进行切割,也就是把浏览器竖着切分

三栏页面布局方式

假设高度已知,请写出三栏布局,其中左兰.右栏宽度各为300px,中间自适应. 1.浮动 2.绝对定位 3.flexbox 4.表格布局 5.网格布局 grid 1.浮动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w

asp.net的几种页面传值方式

1."~/x/xx.aspx?id=" + id string id=Request.Params["id"].ToString(); 2.Response.Redirect("x.aspx?id=1&flag=true") bool flag=Request.QueryString["flag"] 3.在gridview操作列中的LinkButton控件中添加CommandArgument='<%#Eval(&

[转]企业网站首页设计常见的6种布局方式

在群里和大家交流时,看到太多的网页设计师发布企业站的个人作品,设计中总是摆脱不了大框套小框的设计布局思路,不加思索的跳入单一的网页布局形式中,于是就有了把企业站常用的页面布局方式总结一下的想法,让大家包括我自己全面的了解一下企业站的常见布局方式,做到对此种类型的网站布局心中有数,跳出狭隘.单一的设计思路,于是就有了这篇文章.很多人常常询问某个页面该如何布局这样的问题,其实网页布局也没有想象中那么难,只要做到两点我认为起码可以做到临阵不慌,一是对常见的布局方式心中有数,二是根据信息内容及设计素材的

企业网站首页设计常见的6种布局方式

看到太多的网页设计师发布企业站的个人作品,设计中总是摆脱不了大框套小框的设计布局思路,不加思索的跳入单一的网页布局形式中,于是就有了把企业站常用的页面布局方式总结一下的想法,让大家包括我自己全面的了解一下企业站的常见布局方式,做到对此种类型的网站布局心中有数,跳出狭隘.单一的设计思路,于是就有了这篇文章.很多人常常询问某个页面该如何布局这样的问题,其实网页布局也没有想象中那么难,只要做到两点我认为起码可以做到临阵不慌,一是对常见的布局方式心中有数,二是根据信息内容及设计素材的特点进行摆积木式的多