试用css3 语法@media screen and (判断属性){ CSS样式选择器 }
1、DIV+CSS小案例描述
根据整体来设置,设置他们的最大宽度(width)为640px,最小宽度为320px,此类设置适用于手机移动端;要实现屏幕自适应,那么就要用百分比来实现;所以设置width整体100%;img宽度100%;这样实现图片的自由缩放;
HTML代码如下:且仔细看清每一行的注释:
2、看下实现的效果如何:文字大小是如何变化的;
变化浏览器后效果:如图
自定义缩放其实主要就是判断浏览器的宽度,高度需要的话可以设置,还有设置内部区域块儿的宽度以及图片展示用百分比来控制;
拖动到一个div里这个jq ui有例子就不说了,重点就是拖进去后样式的变化,就是在原件拖入后,那么1个元素变2个了,就必须在他们的2个元素外城wrap一个div 给包着。然后用css 修改里面元素的样式:大小,以及元素间的间距.
<style>.bao,.box{width:60pxheight:60pxposition:absolute}
.bao .box{width:20pxheight:20pxposition:relativedisplay:inline-blockmargin:5px}
</style>
<div class="box box1"></div>
<div class="bao">
<div class="box box2"></div>
<div class="box box3"></div>
</div>
大概就是这样的一个思路
1)按你的操作,读取当前的宽度然后设置到样式中:var h = $(window).width()
$(".mymsg").css("width", h)
2)css操作:
设置一个div,设置div的宽度为100%,然后设置img的宽度为100%