从上往下 流式布局_教大家怎么写前端布局
一、静态布局(Static Layout)
1. 布局概念
最传统、原始的Web布局设计。网页最外层容器(outer)有固定的大小,所有的内容以该容器为标准,超出宽高的部分用滚动条(overflow:scroll)来实现滚动查阅。
2. 优点
采用的是css2之前的写法,不存在浏览器兼容性。布局简单。
3. 缺点
但是移动端不可以使用pc端的页面,两个页面的布局不一致,移动端需要自己另外设计一个布局并使用不同域名呈现。
4. 实现方法
PC端:最外层居中,使用固定的宽(高)度,超出部分用滚动条查阅。例如百度首页外层body设置了一个min-width:1000px;,当我打开调试器的时候,底部x轴滚动条就出现了。
当然,它的布局比普通的静态布局要复杂地多了,比如推荐模块又是一个流式布局....
移动端由于静态布局不适用于手机端,所以一般都会另设计一个布局,并使用另一个域名。例如刚刚百度的PC端我们切换成手机模拟器访问试试:
确实有点丑是吧。
我们访问一下百度的手机端页面:m.baidu.com
舒服!
再看一下最近比较'火'的京东的案例:分别访问
- jd.com
- m.jd.com
可以发现:PC端限制了最小的宽度, 低于了则以最小宽度出现滚动条移动端限制了最大的宽度, 超过了则以最大宽度居中显示
二、流式布局(Liquid Layout)
1. 布局概念
流式布局也叫百分比布局
这边引入一下自适应布局:分别为不同的屏幕设置布局格式,当屏幕大小改变时,会出现不同的布局,意思就是在这个屏幕下这个元素块在这个地方,但是在那个屏幕下,这个元素块又会出现在那个地方。只是布局改变,元素不变。可以看成是不同屏幕下由多个静态布局组成的。
而流式布局的特点是随着屏幕的改变,页面的布局没有发生大的变化,可以进行适配调整,这个正好与自适应布局相补。
流式布局常用的设计模板:左侧固定+右侧自适应左右固定宽度+中间自适应(参考京东手机版)
页面元素的宽度按照屏幕进行适配调整,主要的问题是如果屏幕尺度跨度太大,那么在相对其原始设计而言过小或过大的屏幕上不能正常显示 。 你看到的页面,元素的大小会变化而位置不会变化——这就导致如果屏幕太大或者太小都会导致元素无法正常显示。
2. 优点
元素的宽高用百分比做单位,元素宽高按屏幕分辨率调整,布局不发生变化
3. 缺点
屏幕尺度跨度过大的情况下,页面不能正常显示。
三、弹性布局(Flex Layout)
1. 布局概念
弹性布局是CSS3引入的强大的布局方式,用来替代以前Web开发人员使 的一些复杂易错的hacks方法(如float实现流式布局)。
2. 优点
简单、方便、快速
3. 缺点
CSS3新特性,浏览器兼容性非常头疼。而且手机浏览器对flex的支持也不是很理想。
4. 实现方法
flex-flow: ||
flex-direction和flex-wrap的简写,在两者选其一。
flex-direction: row(初始值) | row-reverse | column | column-reverse
flex-direction定义了弹性项目在弹性容器中的放置方向,默认是row,即行内方向(一般而言是由左往右,但注意这个和书写模式有关)。
row:主轴为水平方向,项目沿主轴从左至右排列
column:主轴为竖直方向,项目沿主轴从上至下排列
row-reverse:主轴水平,项目从右至左排列,与row反向
column-reverse:主轴竖直,项目从下至上排列,与column反向
flex-wrap: nowrap(初始值) | wrap | wrap-reverse
flex-wrap定义是否需要拆行以使得弹性项目能被容器包含。*-reverse代表相反的方向。
nowrap:自动缩小项目,不换行
wrap:换行,且第一行在上方
wrap-reverse:换行,第一行在下面
两者结合起来即flex-flow属性就确定了弹性容器在main axis和cross axis两个方向上的显示方式
自适应布局(Adaptive)的特点是分别为不同的屏幕分辨率定义布局。布局切换时页面元素发生改变,但在每个布局中,页面元素不随窗口大小的调整发生变化。 你可以把自适应布局看作是静态布局的一个系列。 就是说你看到的页面,里面元素的位置会变化而大小不会变化。
四、响应式布局(Responsive layout)
采用自适应布局和流式布局的综合方式,为不同屏幕分辨率范围创建流式布局
现在优秀的页面都追求一套代码可以实现三端的浏览;从概念可以看出来,自适应布局的诞生是为了实现不同屏幕分辨率的终端上浏览网页的不同展示方式。
通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。屏幕尺寸不一样展示给用户的网页内容也不一样.
利用媒体查询可以检测到屏幕的尺寸(主要检测宽度),并设置不同的CSS样式,就可以实现响应式的布局。
大名鼎鼎的bootstrap就是响应式布局的专家。
官方放出狠话:Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义类,还有强大的mixin 用于生成更具语义的布局。
连我们最热爱的React官方也热衷于响应式布局设计:《React官方网站》
手机端下的React页面:
五、总结一波
以上四种就是常用的前端布局方案啦,布局并不唯一。灵活应用就能构建出优秀的网站
从上往下 流式布局_教大家怎么写前端布局相关推荐
- 从上往下 流式布局_揭秘做好网站结构优化的4步(下)
昨天说了关于优化网站结构的前二条,网站代码的优化和网站目录的优化,虽然这两条很重要,但是这两条还是内部的东西,要真正做好,还需要网站结构优化的内外结合才能做到一个好的优化效果! 1. 清晰的url优化 ...
- flex 左右布局_面试必考点:前端布局知识
前端的页面布局知识是初中级前端工程师必须掌握的内容,在面试的时候无论大厂小厂都有很大概率被提问到,作为与页面最紧密的前端开发者,前端布局知识是必不可少的一环. 前言 这里所要介绍的布局知识主要是在解决 ...
- java 数据库 流式查询_关于mybatis:强大MyBatis-三种流式查询方法
基本概念 流式查问指的是查问胜利后不是返回一个汇合而是返回一个迭代器,利用每次从迭代器取一条查问后果.流式查问的益处是可能升高内存应用. [腾讯云]云产品限时秒杀,爆款1核2G云服务器,首年99元 如 ...
- 流式数据分析_流式大数据分析
流式数据分析 The recent years have seen a considerable rise in connected devices such as IoT [1] devices, ...
- grpc 流式传输_编写下载服务器。 第一部分:始终流式传输,永远不要完全保留在内存中...
grpc 流式传输 下载各种文件(文本或二进制文件)是每个企业应用程序的生死攸关的事情. PDF文档,附件,媒体,可执行文件,CSV,超大文件等.几乎每个应用程序迟早都必须提供某种形式的下载. 下载是 ...
- spark 流式计算_流式传输大数据:Storm,Spark和Samza
spark 流式计算 有许多分布式计算系统可以实时或近实时处理大数据. 本文将从对三个Apache框架的简短描述开始,并试图对它们之间的某些相似之处和不同之处提供一个快速的高级概述. 阿帕奇风暴 在风 ...
- 计算书 轴流式止回阀_轴流式止回阀的制作方法
轴流式止回阀的制作方法 [技术领域] [0001 ] 本实用新型涉及一种阀门,更具体地说,它涉及一种轴流式止回阀. [背景技术] [0002]轴流式止回阀以其运行平稳,流阻小,水击压力小,流态好,对介 ...
- kafka处理流式数据_通过Apache Kafka集成流式传输大数据
kafka处理流式数据 从实时过滤和处理大量数据,到将日志数据和度量数据记录到不同来源的集中处理程序中,Apache Kafka越来越多地集成到各种系统和解决方案中. 使用CData Sync ,可以 ...
- 版式文件 流式文件_银河麒麟操作系统V10全面适配各类流式版式软件
近日,银河麒麟桌面操作系统V10已与WPS Office 2019 for Linux专业版办公软件V11.永中Office 2019专业版V8.0.数科阅读器政务版2.0.数科OFD文档处理软件V3 ...
最新文章
- spring-MVC源码解读(一)
- 【转】java string类的方法及说明
- JavaScript对Json的增删改属性
- windows2003下防火墙ISA大型实验
- php若$a没定义默认是,PHP之错误处理详解
- 深度学习之递归神经网络(Recurrent Neural Network,RNN)
- C++ Sets MultiSets
- 浅谈闪电网络的可行性
- 面试题--------4、数据类型
- 非战之罪,从永中Office谈起
- 呷哺呷哺的中年危机与贺光启的囚徒困境
- 第七章---8253和8255芯片
- 第三方qq登录(获取头像和昵称)
- Vultr VPS如何修改root密码
- Word目录中自动添加自定义样式的多级标题的方法
- (预处理合集)手写数据集MNIST(2)——Spyder
- opIndex多级索引笔记
- 阿蒙森 斯科特_斯科特的糖尿病解释:飞机类比
- 微信支付之微信内H5调起支付
- 人脸识别 | Facial recognition详细介绍
热门文章
- VS Code 安装插件、自定义模板、自定义配置参数、自定义主题、配置参数说明、常用的扩展插件
- Tensorflow函数——tf.variable_scope()
- torch中的copy()和clone()
- LeetCode简单题之判断路径是否相交
- LeetCode简单题之检查单词是否为句中其他单词的前缀
- ResNet50结构
- HarmonyOS Java工程目录结构
- Multiple substitutions specified in non-positional format; did you mean to add the formatted=”false”
- Android onTouch 方法 和onTouchEvent 方法
- Android 如何防止用户同时点击多个控件问题