1.静态布局

——最传统的布局方式，网页中所有尺寸都是由px作为单位，设置了min-width,如果宽度小于就会出现滚动条，如果大于这个宽度则内容居中外加背景

实现方式：PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；

移动设备：另外建立移动网站，单独设计一个布局，使用不同的域名如wap.或m.。

优点：采用之前的css2的布局·方式，布局简单，没有兼容性问题。

缺点: 在手机端不能合理的显示，移动端不能使用pc端页面，需要再写一个布局来呈现。

实践案例：Float 布局、绝对布局

2.自适应布局

——可以看成是不同屏幕下由多个静态布局组成的。自适应布局是为不同的屏幕分辨率分别定义不同的布局。改变屏幕分辨率可以切换不同的静态布局（页面元素位置可能发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。自适应布局页面里面元素的位置会变化，很好的解决了流式布局中的大屏空间利用率不高弊端。

注：屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。

3.流失布局（百分比布局 %）

网页中主要的划分区域的尺寸使用百分数（搭配min-*、max-*属性使用),分别为不同的屏幕设置布局格式，当屏幕大小改变时，会出现不同的布局，意思就是在这个屏幕下这个元素块在这个地方，但是在那个屏幕下，这个元素块又会出现在那个地方。只是布局改变，元素不变。可以看成是不同屏幕下由多个静态布局组成的。

而流式布局的特点是随着屏幕的改变，页面的布局没有发生大的变化，可以进行适配调整，这个正好与自适应布局相补。使用%百分比定义宽度，高度大都是用px来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。这种布局方式在Web前端开发的早期历史上，用来应对不同尺寸的PC屏幕（那时屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局方式，但缺点明显：主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”

注：屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。

主要实践案例：左侧固定+右侧自适应、左右固定宽度+中间自适应、圣杯布局、双飞翼布局

4.响应式布局（媒体查询）

——通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。屏幕尺寸不一样展示给用户的网页内容也不一样.利用媒体查询可以检测到屏幕的尺寸(主要检测宽度)，并设置不同的CSS样式，就可以实现响应式的布局。主要依靠是css的媒体查询。

注：每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。

5.弹性布局

——rem/em、flex布局

DIV+CSS布局下，怎样解决对不同解析度的适应问题

一般的解决方案。采用定长定宽的布局。规划好页面的各部分元素大小。精确到px。然后整体居中，两侧留白。这样解析度不一样，只会影响留白部分的大小。居中部分在各解析度下显示效果一致。

另一种解决方案比较少用。就是采用流式布局。页面的各部分都是按照百分比去设定的。这样解析度不一样的情况下。效果都是一致的。但是比较难以掌控。编码难度大，测试困难。因此较少采用。

另外，针对不同移动装置下，不同解析度通常采用服务端判断装置型别，然后载入相应css去实现不同装置访问自适应。

DIV+IFRAME+CSS 不同解析度自适应

CSS3中有弹性布局，专门做这个，不过并非所有浏览器都能支援CSS3。

因此你应该是固定和bottom的高度，而内容的左右两栏一般left固定宽度，right自适应。

如果你不考虑IE6，那么可以用display: table布局，如果需要考虑IE6，可以用js获取页面宽度，再减去left宽度就得到了right宽度。如果不想用js，那么就直接用table来做吧。

至于内容区域的高度，应该是整个页面的可视高度，减去高度，再减去bottom高度。同样的道理，建议用js来计算。

javascript调整网页布局适应不同解析度的问题

不多说了，我估计你一看就明白了！

<script language="javascript">

window.onload=function(){

var main_j = document.documentElement.clientHeight-210

document.getElementById('main_heigh').style.height = main_j + 'px'

var main_w = document.documentElement.clientWidth-202

document.getElementById('main_heigh').style.width = main_w + 'px'

}

window.onresize=function(){

var main_j = document.documentElement.clientHeight-210

document.getElementById('main_heigh').style.height = main_j +'px'

var main_w = document.documentElement.clientWidth-202

document.getElementById('main_heigh').style.width = main_w + 'px'

}

</script>

unity5 ui怎么布局以适应不同解析度

这问题。。。这说的就是一个意思吧，UI自适应指的就是适应不同萤幕比例和解析度大小，重新自动排版和缩放，只要说UI自适应，当然说的就是萤幕自适应了，难道你想说的意思是相机视野的自适应？

div+css解析度问题

你好，请贴出程式码或者直接PM我

帮忙解决一下div+css布局问题

.tab2 ul{

list-style:none

padding:0px

margin:20px 0px

}

.tab2 li{

overflow:hidden

display:inline

float:left

width:80px这个地方最好不要用%，设定一个具体的宽度

}

变形也可能是因为相容性的问题。

Android介面布局怎么样适应不同解析度的手机

我一般都会使用相对布局，通过获取手机的解析度以及计算控制元件的宽高比例和控制元件所处理想萤幕中所占的比例来适配所有的手机，保证很复杂的图片不会被拉伸压缩导致变形扭曲。

各种Android作业系统的手机简直就是琳琅满目，萤幕解析度的差异可想而知。目前比较主流的有WVGA=800x480，HVGA=480x320，另外的还有QVGA=320x240。当然还有魅族M9的DVGA=960x640，还有蛋疼的摩托罗拉的FWVGA=854x480。

其实，在你layout的xml档案中，编写的时候是不是用了许多的padding呢？如果是，那你就蛋疼了。因为这样的布局永远是无法适应所有手机萤幕的。

正确的做法应该是使用的是weight属性。将你控制元件的layout中的width、height设定为fill-parent，不要使用wrap——content。因为wrap-content的大小是不固定的。而weight（权重）这个属性很好的解决了这个问题。

当包裹在控制元件外面的Layout的width、height属性都设定为fill-parent时，可以利用weight的反位元性。即如果控制元件A设定weight为5，控制元件B设定weight为7，那么A所占的空间为5/（5+7），B所占的空间为7/（5+7）。这样的反比属性对任何解析度下的手机都是合适的。

当然，字型就不行了。那怎么保证字型能够跟布局一样能够自适应呢？

呵呵，很简单，就是在你的res资料夹中建立一个资料夹，叫做values-320x240。其中320x240是你手机萤幕的解析度，根据你手机萤幕的情况做不同的命名，例如values-800x480。在该资料夹下建立一个dimens.xml档案，定义各种字型的大小。那么系统就会自动根据你手机萤幕的解析度去呼叫响应的资料夹。

另外，值得提醒的是，记得在你预设的values档案下的dimens.xml档案中也要写上相应的字型大小哦，因为当系统无法认识你手机萤幕大小的时候，它会自动去找你预设档案中的

东西，没有写的话程式会崩溃。

************************************************************分割线************************************************************

在看下面内容之前首先请看你SDK文件中以下这篇文章

其实google在解析度适应性的东西已经写的很清楚了，只是我们很多人没去看而已

以下是结论：

萤幕解析度：1024x600

density：1（160）

资料夹：values-mdpi-1024x600

萤幕解析度：1024x600

density：1.5（240）

资料夹：values-hdpi-683x400 由1024/1.5 600/1.5得到，需要四舍五入。

萤幕解析度：800x480

density：1（160）

资料夹：values-mdpi-800x480

萤幕解析度：800x480

density：1.5（240）

资料夹：values-hdpi-533x320 由800/1.5 480/1.5得到，需要四舍五入。

以此类推

一般情况下需要创建出values 、values-mdpi 、 values-hdpi资料夹，以备在一些没有规定的尺寸萤幕上找不到资源的情况。

然后在里面使用不同的dimens档案，Layout中不要使用显示的数字，所有的尺寸定义全都援引dimens里面的内容。

这样能够保证深度UI定制的情况

另外在工程的default.properties中如果split.density=false，则解析度适配的时候资料夹命名不需要与scale相除

例

萤幕解析度：800x480

density：1.5（240）

资料夹：values-hdpi-800x480

************************************************************分割线************************************************************

关于dimens

位置：res\values

单位：px Pixel 以画面的画素为单位；

in Inches以画面的多少英寸为单位；

mm Millimeter以画面的多少毫米为单位；

pt Points 一点为1/72英寸；

dp或dip Density-indepentdent 为160dpi萤幕的一个pixel

ap Scale-independent Pixels 随萤幕尺寸改变的一个pixel

1.drawable: 存放不同解析度对应图片

在2.1版本中有drawable-mdpi、drawable-ldpi、drawable-hdpi三个，这三个主要是为了支援多解析度。

drawable- hdpi、drawable- mdpi、drawable-ldpi的区别：

(1)drawable-hdpi里面存放高解析度的图片,如WVGA (480x800),FWVGA (480x854)

(2)drawable-mdpi里面存放中等解析度的图片,如HVGA (320x480)

(3)drawable-ldpi里面存放低解析度的图片,如QVGA (240x320)

系统会根据机器的解析度来分别到这几个资料夹里面去找对应的图片。

在2.1之前的版本可以通过drawable-800x480, drawable-480x320 等方式实现。

2:layout:放置对应不同解析度的布局

建立不同的layout资料夹， layout-800x480,layout-480x320, 系统会根据萤幕的大小自己选择合适的layout进行使用。

另外：可以在res目录下建立layout-port和layout-land两个目录，里面分别放置竖屏和横屏两种布局档案。

下面列出主流的android机型有：

240x320低端，国产入门级采用，例如HTC G4，G8

320x480中端，大部分基于此解析度，例如HTC G1,G2,G3,G6, MOTO ME600, SAMSUNG I7500

480x800中高阶，大部分基于此解析度，例如HTC G5,G7, MOTO MT810

480x854MOTO特有的，例如Droid, Milestone, XT800

960x640, 魅族M9

div+css布局问题

不是 楼上是对的 只能是你自己的问题

检查一下 看看设定的地方设定错没有

检查css样式是否出错 比如 写了另外一个

还有 检查别的地方是否有优先顺序更高的样式设定了图片位置~~！

如果不行 上程式码来看看

一、float实现

html结构：

[html] view plain copy

<div class="left"></div>

<div class="right"></div>

<div class="center"></div>

css：

[css] view plain copy

.left,.right{

width: 200px

height: 300px

background-color: red

}

.left{

float: left

}

.right{

float: right

}

.center{

margin: 0 210px

height: 300px

background-color: blue

}

这种实现受外界影响小，但是对html结构有要求（center必须放在最后，left与right则无所谓），当界面缩小到一定程度时，right会被挤到下一行

二、position实现

html结构：

[html] view plain copy

<div class="left"></div>

<div class="right"></div>

<div class="center"></div>

css：

[css] view plain copy

.left,.right{

position: absolute

width: 200px

height: 300px

background-color: yellow

}

.left{

left: 0

}

.right{

right: 0

}

.center{

margin: 0 210px

height: 300px

background-color: blue

}

该法布局的好处，三个div顺序可以任意改变。不足是 因为绝对定位，所以如果页面上还有其他内容，top的值需要小心处理，最好能够对css样式进行一个初始化，如果不对样式进行初始化，则两边和中间的值会对不齐。 另外，随着浏览器窗口缩小，小于200px的时候，会发生重叠。

---