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

html-css018

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

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

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

如果不行 上程式码来看看

1、首先用dw编辑器建立了一个静态页面

2、将建好的静态页命名为css.html,标题为了“css如何设置图片大小自适应”

3、在body中添加两个div,设置不能的宽度,并设class 为div1和div2,目的是用一样的css控制图片的宽度在不同的宽度容器中都能很好的显示

4、在两个div的class 中添加相同的控制图片的class名为了 ”img“,并为div添加控制宽度的样式

5、在两个div中加入相同的图片<img src="images/5.png" />,在浏览器打开页面发现加入图片后把原来的div都给覆盖掉了

6、这个时候我们需要在img 类中加入限制图片的宽度的css语句让他自己适应容器的宽度.img img{ width:100%height:auto}

如何用CSS使图片自适应显示宽度 公司的专案中需要显示由使用者提供URI连结的图片,可是预先无法获知图片的尺寸大小,如果图片尺寸过大将会影响页面布局。最理想的解决方案自然是自动生成缩图,涉及的后台工作较为复杂,用CSS进行控制是一个可以接受的捷径。 如果用width 属性强行设定显示尺寸似乎太不智慧。幸好Firefox/Opera/IE 7 都提供了 max-width 属性支援。假定希望图片显示宽度不超过500画素,CSS可能如下: 以下是引用片段: 以下是引用片段: fit-image{ border:0max-width:500px}IE6 不支援 max-width 属性,但是利用 IE 独有的 expression 属性可以迂回的解决这个问题。 以下是引用片段: 以下是引用片段: fit-image{ border:0max-width:500pxwidth:expression( function(img){ img.onload=function(){ this.style.width=’’this.style.width=(this.width500)?"500px":this.width+"px"}return’120px’载入时显示宽度为120px }(this))}利用<img的onload 事件使图片载入完成后计算其尺寸大小,如果超过500画素就显示为500画素,否则显示其预设宽度。 expression 不是符合WEB标准的做法,不到万不得以不建议使用。但是不能不承认IE的很多扩充套件是不错的,IE不应该被轻视!

CSS程式码如何使图片自适应显示宽度

图片尺寸过大将会影响页面布局。最理想的解决方案自然是自动生成缩图,涉及的后台工作较为复杂,用CSS进行控制是一个可以接受的捷径。 如果用width 属性强行设定显示尺寸似乎太不智慧。幸好 Firefox/Opera/IE 7 都提供了 max-width 属性支援。假定希望图片显示宽度不超过500画素,CSS可能如下: 以下是引用片段:以下是引用片段:

fit-image {

border : 0

max-width : 500px

} IE6 不支援 max-width 属性,但是利用 IE 独有的 expression 属性可以迂回的解决这个问题。 以下是引用片段:以下是引用片段:

fit-image {

border : 0

max-width : 500px

width: expression (

function(img){

img.onload=function(){

this.style.width = (this.width >500)?"500px":this.width+"px"}return ’120px’ 载入时显示宽度为120px}(this))} 利用<img>的onload 事件使图片载入完成后计算其尺寸大小,如果超过500画素就显示为500画素,否则显示其预设宽度。 expression 不是符合WEB标准的做法,不到万不得以不建议使用。但是不能不承认IE的很多扩充套件是不错的,IE不应该被轻视!

css怎么让图片自适应

看什么情况了

一是通过将该图片设定为某个div的背景图片,然后该div的长宽不使用绝对的px,使用相对的em或者rem。

二是将图片设定display:block,设定图片的长宽为rem或者em。

还是要看是什么情况下来去自适应图片的,

如何使用CSS强制图片自适应大小

<!DOCTYPE PUBLIC "-W3CDTD XHTML 1.0 TransitionalEN" " :w3./TR/x1/DTD/x1-transitional.dtd">

<xmlns=" :w3./1999/x">

<head>

<meta -equiv="Content-Type" content="text/charset=gb2312" />

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

<style type=text/css>

img {width:expression(this.width>600?"580px":this.width+"px")}

</style>

</head>

<body>

图片宽度大于600画素都强制显示为580画素宽<br><br>

<div>

<img src= :makewing./lanren/wallpaper/wallpaper-0013.jpg />

</div>

</body>

</>

如何是页面上的图片自适应页面宽度?

<img width=100% src=a1.jpg>

如何用纯CSS将图片填满div,自适应容器大小

将图片的宽和高的属性设定为100%即可

例如图片的类名为pic

.pic{width: 100%height: 100%}

如何让input宽度自适应?

很多时候文字框输入的内容是不固定的,有时候输入的内容多一些需要宽一些有时候输入的内容少一些需要窄一些,所以需要设定input的宽度自适应。

工具原料:编辑器、jQuery

1、解决宽度自适应的思路是使用jQuery来监听输入事件,进而进行动态的改变input的宽度,实现input宽度自适应的效果。

2、首选获取文字的宽度,利用pre 元素可定义预格式化的文字,被包围在 pre 元素中的文字通常会保留空格和换行符而文字也会呈现为等宽字型,简单的程式码示例如下:

var textWidth = function(text){ var sensor = $('<pre>'+ text +'</pre>').css({display: 'none'})$('body').append(sensor)var width = sensor.width() sensor.remove()return width }

3、根据以上获取到的文字的宽度来给input系结事件动态改变宽度,简单的程式码示例如下:

$("input").unbind('keydown').bind('keydown', function(){$(this).width(textWidth($(this).val())) })

input高度固定,自动增宽<br>

<input type=text class="page_speeder_863029014">

<br>

<br>

textarea宽度固定,自动增高<br>

<textarea type=text class="page_speeder_1875386613"></textarea>