css3怎么实现屏幕自适应

html-css022

css3怎么实现屏幕自适应,第1张

试用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%