固定布局经不起未来考验 固定像素尺寸的网页是匹配固定像素尺寸显示器的最简单办法。但这种方法不是一种完全兼容未来网页的制作方法，我们需要一些适应未知设备的方法。 为什么响应式设计需呀百分比布局 仅使用媒体查询来适应不同视口的固定宽度设计，只会从一组CSS媒体查询规则突变到另一组，两者间 ...

流式布局（百分比布局） 在CSS2时代就有，主要指的是将页面中元素的宽度以百分比表示并进行排版，可以在不同分辨率下显示相同的版式 响应式布局 关键技术是CSS3中的媒体查询，可以在不同分辨率下对元素重新设置样式（不只是尺寸），在不同屏幕下可以显示不同版式 　　举例 ...

　　一、百分比布局（又名流式布局） 　　流式布局的特点就是采用display：flex；来控制整体布局，文字会随着屏幕的宽度自动延伸，弹性控件的空间会随着屏宽逐渐加大但不会自动增大，图片采用百分比进行缩放。 　　二、rem布局（又名等比缩放布局） 　　 　　单位： 　　em ...

响应式布局是什么？ 一、什么是响应式布局？   响应式布局就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。   响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验。 二、响应式布局 ...

如果布局使用百分比宽度，在不同的显示器上效果可能不太一样。固定像素尺寸的网页是匹配固定像素尺寸显示器的最简单办法。将固定像素宽度转换对应的百分比宽度： 目标元素宽度/上下文元素宽度=百分比宽度 em代替px主要是为了文字缩放。针对老版本IE，现在浏览器支持缩放像素为单位的文字了。优点：1.使用 ...

关于float。 一般情况，使用float能使所在的div层悬浮于当前所在页面的上方（比如第一层图）； 使用clear能消除这种悬浮效果。（比如第二层图） 注意：使用floa ...

摘自阮老师的博客 点击查看运行效果 ...

基础概念 屏幕尺寸 屏幕对角线的长度（cm） 屏幕像素密度 屏幕密度是指一个设备表面上存在的像素数量，它通常以每英寸有多少像素来计算(PPI)。 屏幕分辨率 横纵向上物理像素 ...