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

响应式布局是一个网站能够兼容多个终端---而不是为每个终端做一个特定的版本 @media all(用于所有的设备) || screen (用于电脑屏幕,平板电脑,智能手机等) and|not|only(三个关键字可以选) 1.meta 标签 最简单的处理方式是加上一个 ...

概念 Responsive design，意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。 步骤 1. 设置 Meta 标签 大多数移动浏览器将html页面放大为宽的视图（viewport）以符合屏幕分辨率 ...

（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。 二、流动布局（fluid grid） ...

响应式布局 响应式布局在面对不同分辨率设备灵活性强，在平时的网页设计中基本上都要用到响应式布局设计，它给我们提供了良好的用户浏览页面，能带给我们更好的客户体验，下面给大家分享下我做的一个简单的响应式的布局： 不同的页面会适用不同大小浏览器页面，它会随着分辨率的变化而变化。代码展示 ...

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

基本的概念 一个网站可以兼容多个终端，针对不同终端设置不同的样式。 优点： 面对不同分辨率设备灵活性强； 能够快捷解决多设备显示适用问题； 缺点： 兼容各种设备，效率低下； 代码累赘； 实现响应式布局的三种方式 1. CSS3-Media Query ...

任务八 : 响应式网格(栅格化)布局 目标:实现效果如图 知识点 CSS3 属性 box-sizing 的使用: 当元素的宽度、高度确定时, { box-sizing : border-box }将元素的padding, border都将在设定的高度和宽度内绘制;也就是说 ...