css3怎么实现屏幕自适应

html-css08

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

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

1、DIV+CSS小案例描述

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

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

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

变化浏览器后效果：如图

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

样式一： css3弹性

<style type="text/css">

*{margin: 0padding: 0}

.top{width: 100%height: 100pxbackground: greenyellow}

.flex{display: flex}

.left{width: 200pxbackground: orangered}

.right{flex-grow: 1background: blue}

</style>

样式二： css2

<style type="text/css">

*{margin: 0padding: 0}

.top{width: 100%height: 100pxbackground: greenyellow}

.left{width: 200pxbackground: orangeredfloat: left}

.right{margin-left: 200pxbackground: blue}

</style>

<body>

<div class="top">

<h1>头</h1>

</div>

<div class="flex">

<div class="left">

<h1>左边</h1>

<h1>左边</h1>

<h1>左边</h1>

<h1>左边</h1>

</div>

<div class="right">

<h1>右边</h1>

<h1>右边</h1>

<h1>右边</h1>

<h1>右边</h1>

</div>

</div>

</body>