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

2023-03-27 10:51:01html-css014

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

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

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

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

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

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

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

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

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

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样式是否出错比如写了另外一个

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

如果不行上程式码来看看

以上需要的文件及图片

<!doctype html>

<html>

<head>

<title>无标题文档</title>

<style>

/* 公用 */

body{ margin:0overflow:hidden}

img{ display:block}

span{ display:block}

a{ text-decoration:nonedisplay:blockcolor:#000}

p,h1,h2,h3,h4{ margin:0font-weight: normalfont-size:12px}

ul{ margin:0padding:0}

input{ margin:0padding:0outline:noneborder:none}

body{ font-family:"微软雅黑"font-size:14pxbackground-color:#f2f2f2}

body h2,h3,h4{ color:#000}

ul{ margin:0padding:0}

li{ list-style:none}

.clearfix{ clear:both}

/*内容*/

.nav_box>li{ position:relativefloat:leftwidth:100pxtext-align:centermargin-top:10pxheight:30pxcursor:default}

.nav_box>li>h2{ border-right:1px solid #cccheight:16pxmargin-top:7pxfont-weight:boldwidth:90pxdisplay:blocktext-align:leftpadding-left:16pxbox-sizing:border-box}

.nav_box>li>img{ position:absolutetop:12pxright:18px}

.subnav_box{ position:absolutetop:30pxright:0pxwidth:300pxheight:400pxbackground-color:#fffbox-sizing:border-boxpadding:20px}

.subnav_box ul{ float:leftmargin-right:20px}

.subnav_box ul>li{ line-height:24px}

.nav_box>li:hover{ background-color:#fff}

.nav_box li:hover .subnav_box{ display:block}

</style>

$(function(){

$(".nav_box>li").mouseenter( function(){

$(".nav_box>li").children(".subnav_box").hide()

$(this).children(".subnav_box").show()

$(this).children("img").attr("src","img/arrow_bottom_gary.png")