前端流行的三种布局详解

目前比较流行的布局有三种
1.流式布局：
含义：页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。这就导致如果屏幕太大或者太小都会导致元素无法正常显示
设计原理：使用百分比定义宽度，高度大都是用px来固定，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。
缺点：在过大或者过小的屏幕下，元素不会正常显示，会错位
正常屏幕效果：
过小屏幕下：

2.自适应布局：
含义：分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。
设计原理：使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式**，布局变化但是元素大小不变**
缺点：要写很多套媒体查询，并且设计几个静态布局

3.响应式布局：
含义：分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。
设计原理：媒体查询+流式布局。使用@media媒体查询和网格系统配合相对布局单位进行布局，就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。
缺点：开发难度和工作量都是非常大的，开发价格自然比普通网站高。

 未完待续，下次再写案例。。。。

可以参考：https://www.cnblogs.com/soyxiaobi/p/9594557.html

前端流行的三种布局详解相关推荐

python 命令-python解析命令行参数的三种方法详解
这篇文章主要介绍了python解析命令行参数的三种方法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 python解析命令行参数主要有三种方法: ...
Maven精选系列--三种仓库详解
转载自 Maven精选系列--三种仓库详解仓库分类 1.本地仓库本地仓库就是开发者本地已经下载下来的或者自己打包所有jar包的依赖仓库,本地仓库路径配置在maven对应的conf/settings ...
全站仪与计算机之间的数据传输,必看！全站仪数据传输的三种方式详解，都安排得明明白白（上）...
原标题:必看!全站仪数据传输的三种方式详解,都安排得明明白白(上) 科力达全站仪数据传输一般而言,全站仪的数据传输方式有三种,分别是通过串口.USB.SD卡三种方式,因为电脑配置等因素的不同,一些数 ...
查看登陆系统用户的信息的三种方法详解
查看登陆系统用户的信息的三种方法详解作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.who这个命令显示可以谁在登陆,但是这个有很多的花式玩法,这个命令超简单语法:who [O ...
网页中的三种地址详解
网页中的a标签具有地址跳转的功能,href属性指向跳转的地址. 一.三种地址模式网络地址分为两种,一种是绝对地址,一种是相对地址. 但是相对地址又可以细分为两种,一种是基于当前目录的相对地址,一种是 ...
C语言求最大公约数三种方法详解
C语言求最大公约数三种方法详解题目要求常用写法(穷举法) 辗转相减法辗转相除法 main函数整体代码题目要求运行最大公约数的常用算法,并进行程序的调式与测试. 常用写法(穷举法) 从两个数 ...
C++基础：new的三种形式详解
new的三种形式详解: 1.new operator : new操作符 <=====> ( operator new 开辟空间 ) + (调动构造函数 ) 2.oper ...
mysql 删除数据表中数据_Mysql-删除数据表-三种方式详解
Mysql 删除数据表的三种方式详解用法: 1.当你不再需要该表时, 用 drop; 2.当你仍要保留该表,但要删除所有记录时, 用 truncate; 3.当你要删除部分记录或者有可能会后悔的话, ...
新浪微博怎么推广引流,微博推广引流的三种方法详解
新浪微博怎么推广引流,微博推广引流的三种方法详解,#推广#营销微博营销有哪些特点?#百收网SEO@千行助推大家好,上一次内容讲了生意人如何将客户引流到自己的微信上去,受到很多朋友的喜爱,那么这一期 ...

前端流行的三种布局详解

前端流行的三种布局详解相关推荐

最新文章

热门文章