今天在面试过程中，面试官问了一个关于移动端布局的问题，什么是流式布局。第一次听到这个词还是比较懵逼的，回来查了一遍以后发现是指采用百分比进行排版，在不同分辨率下显示相同的版本，而响应式布局则是使用CSS3中的媒体查询。
流式布局简单栗子
除了采用百分比外，一般可以搭配max-*、min-*属性，比如pc网页min-width为960px，主体宽度为80%。当新的vw、vh单位兼容后，使用这些单位可以可实现更好的流式布局。
总的来说，早期采用的流式布局的主要缺点在于，使用宽度定义百分比，但文字和高度一般采用px来固定，在大屏幕下的显示效果会出现页面元素被拉伸的很长的情况，而文字高度和原来一样，显得非常不协调。
当结合媒体查询（弹性布局）、vw、vh这些单位，可以做更好的移动端体验。
今天在面试过程中，面试官问了一个关于移动端布局的问题，什么是流式布局。第一次听到这个词还是比较懵逼的，回来查了一遍...
1、css标准流排版特点及流式布局 标准流式布局：从左到右 从上到下 2、css浮动的原理 浮动不影响标准流布局，...
@(CSS)[CSS, 布局] 深入学习CSS布局系列（一）布局常用属性 一直感觉自己对CSS的各个属性很了解，可...
了解基本知识 浏览器采用的是流式布局模型（Flow Based Layout） 浏览器会把CSS解析成CSSOM ...
网页布局基础 什么是网页布局？网页布局是网页制作的基础（DIV+CSS网页布局） 分类:流式布局，浮动布局，绝对定...
页面布局 静态布局(Static Layout)使用CSS逻辑像素单位px进行定宽布局，是PC端最常见形式。 流式...
1.css3常用的布局有多栏布局、多列布局、弹性布局、流式布局、瀑布流布局和响应式布局。2.float浮动布局，a...
Flex是Flexible Box的缩写，意为“弹性布局”。 采用 Flex 布局（display: flex;）...
iOS精选源码 JPLiquidLayout 简单易用的流式布局 labelGroupAndStreamSwift...
1.了解浏览器的渲染机制 （1）浏览器采用流式布局模型。（2）首先浏览器会将HTML解析成DOM，把CSS解析成C...
本文标题：「CSS学习」简单了解流式布局
本文链接：https://www.haomeiwen.com/subject/nzjtvxtx.html
网友评论