css3怎么实现屏幕自适应

html-css046

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

试用css3 语法@media screen and (判断属性){ CSS样式选择器 }

1、DIV+CSS小案例描述

根据整体来设置,设置他们的最大宽度(width)为640px,最小宽度为320px,此类设置适用于手机移动端;要实现屏幕自适应,那么就要用百分比来实现;所以设置width整体100%;img宽度100%;这样实现图片的自由缩放;

HTML代码如下:且仔细看清每一行的注释:

2、看下实现的效果如何:文字大小是如何变化的;

变化浏览器后效果:如图

自定义缩放其实主要就是判断浏览器的宽度,高度需要的话可以设置,还有设置内部区域块儿的宽度以及图片展示用百分比来控制;

隐藏文字:

font-size:0px

或者

background:#FFFFFF

color:#FFFFFF

/*让背景色和文字颜色相同,好处是所有浏览器都可以显示,如果用滤镜的话,就只兼容IE了*/

控制间距:

line-height:20px