css适应样式,简述css样式的功能

css自适应字体样式？

如果是一排文字，一个background=‘red’;就搞定了。是多行的话，只有根据文字行高，用一张背景图横向重复。

css样式自适应分辨率

高度和宽度尽量使用百分百，像素px换成em、rem这种，网页会根据大小来自适应，要想使用效果好，就需要根据不同分辨率来设置层的高宽、字体大小，设置几套样式来应用

@media screen and (min-width:640px) {

/*屏幕大于640像素应用该样式*/

}

@media screen and (min-width:460px) and (max-width:640px) {

/*屏幕小于640大于460像素应用该样式*/

}

@media screen and (max-width:460px) {

/*屏幕小于460像素应用该样式*/

}

怎样用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按钮自适应实现原理及代码

按钮自适应原理是利用a标签和i标签各自一个背景组合成为按钮，达到自适应，具体实现css样式及html结构如下，感兴趣的朋友可以参考下

原理：利用a标签和i标签各自一个背景组合成为按钮，达到自适应。

代码如下:

!DOCTYPE

html

html

head

meta

charset="UTF-8"

style

type="text/css"

.btn

a{text-decoration:none;}

.btn{display:

inline-block;

background:

url(s_btn.png)

no-repeat

0;

height:

22px;

line-height:

22px;

color:

#666;

vertical-align:top;}

.btn

i{display:block;font-style:

normal;

font-size:

12px;

padding:

10px;

background:url(s_btn.png)

no-repeat

right

-22px;

}

.btn:hover{text-decoration:

none;color:#4c8136;background-position:

-44px;}

.btn:hover

i{background-position:

right

-66px;}

.btn:active{background-position:

-88px;}

.btn:active

i{background-position:

right

-110px;}

.btn_disabled,

.btn_disabled:hover{background:

url(../img/s_btn.png)

no-repeat

-132px;cursor:

default;}

.btn_disabled

i,

.btn_disabled:hover

i,

.s_btn_disabled:active

i{background-position:

right

-154px;color:#999;}

/style

/head

body

a

href="#"

class="btn"

i这是按钮/i

/a

a

href="#"

class="btn"

i按钮/i

/a

/body

/html

效果：

如果在写css样式的时候想让宽高自适应要怎么写，需要注意什么

是通过百分比来控制宽度；

width:100%通过百分比自适应宽度。注意；此百分比是相对于父级元素宽度。父级元素宽度1000px；子元素设置百分比；是父级元素的百分比；

2.可以通过块状元素自动占满父级的宽度的特性来实现

div默认display:block；不对div设置宽度。div默认占满父级元素的宽度。

3.flex-box布局，用flex布局的话，非常的方便可以实现多种自适应布局，但是，只适用于移动端，PC端上面只有高版本的浏览器才兼容，低版本的浏览器是不兼容的。

自适应手机屏幕的css样式 怎么写 改添加在哪里？

不是随便添加句话就可以自适应手机屏幕的，没这么简单。如果要自适应手机，是要用到rem单位的，然而rem又要搭配媒体查询来使用。

例如你的设计稿如果是宽720px的话，那你的文字就要以原始大小除以11.25，例如16px的话就要16/11.25这样来计算。我的意思是不用像素，用rem,因为px是写死的，rem是可以适应手机端的（包括盒子的宽高都是要以rem来计算）。另外，用之前要把下面这段代码放到你css文件里：

@media only screen and (max-width: 1080px) {

html, body {

font-size: 16.875px;

}

}

@media only screen and (max-width: 960px) {

html, body {

font-size: 15px;

}

}

@media only screen and (max-width: 800px) {

html, body {

font-size: 12.5px;

}

}

@media only screen and (max-width: 720px) {

html, body {

font-size: 11.25px;

}

}

@media only screen and (max-width: 640px) {

html, body {

font-size: 10px;

}

}

如果宽是720，就除以它相对应的那个值，如果是宽960，就除以960相对应的那个值，这么说应该可以明白吧。

纯手打，望采纳~