常用css自适应方法_css怎么自适应宽度

A. css高度自适应怎么实现

不设置高度就是高度自适应,会根据其子元素的高度自动变化,但是子元素设置了浮动的话记得要清除浮动,不然父元素的高度会变成0

B. 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像素应用该样式*/
}

C. css怎么自适应宽度

css自适应宽度有2种方式：
1.是通过百分比来控制宽度；
2.可以通过块状元素自动占满父级的宽度的特性来实现
PS：当然还有一些方法，比如css3的flex-box布局，用flex布局的话，非常的方便可以实现多种自适应布局，但是，只适用于移动端，PC端上面只有高版本的浏览器才兼容，低版本的浏览器是不兼容的。

D. css中怎么调试电脑的分辨率自适应

你用媒介查询

CSS3 Media Queries

或者这样的形式：

不知道大家留意没有，其中两种方式引入CSS样式都有一个共同的属性“media”，而这个“media”就是用来指定特定的媒体类型，在HTML4和CSS2中充许你使用“media”来指定特定的媒体类型，如屏幕（screen）和打印（print）的样式表，当然还有其他的，比如说“TV”,“handheld”等，其中“all”表示的是支持所有媒体介质。有关于更多的Media类型，可以点击这里。

上
面简单说了一下HTML4和CSS2的“Media Queries”,而今天的主要是来学习CSS3中的"Media
Queries"的更多使用方法和相关知识，下面我们开始进入今天的主题。CSS3中的Media
Queries增加了更多的媒体查询，同时你可以添加不同的媒体类型的表达式用来检查媒体是否符合某些条件，如果媒体符合相应的条件，那么就会调用对应的
样式表。换句简单的说，“在CSS3中我们可以设置不同类型的媒体条件，并根据对应的条件，给相应符合条件的媒体调用相对应的样式表”。现在最常见的一个
例子，你可以同时给PC机的大屏幕和移动设备设置不同的样式表。这功能是非常强大的，他可以让你定制不同的分辨率和设备，并在不改变内容的情况下，让你制
作的web页面在不同的分辨率和设备下都能显示正常，并且不会因此而丢失样式。

首先来看一个简单的实例：

上面的media语句表示的是：当页页宽度小于或等于600px,调用small.css样式表来渲染你的Web页面。首先来看media的语句中包含的内容：

1、screen：这个不用说大家都知道，指的是一种媒体类型；

2、and：被称为关键词，与其相似的还有not,only，稍后会介绍；

3、（max-width:600px）：这个就是媒体特性，说得通俗一点就是媒体条件。

前面这个简单的实例引出两个概念性的东西，一个就是媒体类型（Media Type）和媒体特性（Media Query），首先一起来理解一下这两个概念：

一、媒体类型(Media Type)

媒
体类型(Media
Type)在css2中是一个常见的属性，也是一个非常有用的属性，可以通过媒体类型对不同的设备指定不同的样式，在css2中我们常碰到的就是
all（全部）,screen（屏幕）,print（页面打印或打邱预览模式）,其实在媒体类型不止这三种，w3c总共列出了10种媒体类型。

页面中引入媒体类型方法也有多种：

1、link方法引入

2、xml方式引入

<?xml-stylesheet rel="stylesheet" media="screen" href="css/style.css" ？>

3、@import方式引入

@import
引入有两种方式，一种是在样式文件中通过@import调用别一个样式文件；另一种方法是在<head></head>中
的<style>...</style>中引入，单这种使用方法在ie6-7都不被支持如

样式文件中调用另一个样式文件：

@import url("css/reset.css") screen; @import url("css/print.css") print;

在<head></head>中的<style>...</style>中调用：

<head> <style type="text/css"> @import url("css/style.css") all; </style> </head>

4、@media引入

这种引入方式和@import是一样的，也有两种方式：

样式文件中使用：

@media screen{ 选择器{ 属性：属性值； } }

在<head>>/head>中的<style>...</style>中调用：

<head> <style type="text/css"> @media screen{ 选择器{ 属性：属性值； } } </style> </head>

以上几种方法都有其各自的利弊，在实际应用中我建议使用第一种和第四种，因为这两种方法是在项目制作中是常用的方法，对于他们的具体区别，我就不说了，想了解的大家可以去找度娘或G爸，他们能帮你解决。

二、媒体特性（Media Query）

前面有简单的提到，Media Query是CSS3 对Media Type的增强版，其实可以将Media Query看成Media Type(判断条件)+CSS(符合条件的样式规则)，常用的特性w3c共列出来13种。具体的可以参阅：Media features。为了更能理解Media Query，我们在次回到前面的实例上：

转换成css中的写法为：

@media screen and (max-width: 600px) { 选择器 { 属性：属性值； } }

其实就是把small.css文件中的样式放在了@media srceen and (max-width;600px){...}的大括号之中。在语句上面的语句结构中，可以看出Media query和css的属性集合很相似，主要区别在：

1、Media query只接受单个的逻辑表达式作为其值，或者没有值；

2、css属性用于声明如何表现页页的信息；而Media Query是一个用于判断输出设备是否满足某种条件的表达式；

3、Media Query其中的大部分接受min/max前缀，用来表示其逻辑关系，表示应用于大于等于或者小于等于某个值的情况

4、CSS属性要求必须有属性值，Media Query可以没有值，因为其表达式返回的只有真或假两种

常用的Media Query如下表所示：

兼容的浏览器：

下面我们一起来看看Media Queries的具体使用方式

一、最大宽度Max Width

上面表示的是：当屏幕小于或等于600px时，将采用small.css样式来渲染Web页面。

二、最小宽度Min Width

上面表示的是：当屏幕大于或等于900px时，将采用big.css样式来渲染Web页面。

三、多个Media Queries使用

Media
Query可以结合多个媒体查询，换句话说，一个Media Query可以包含0到多个表达式，表达式又可以包含0到多个关键字，以及一种Media
Type。正如上面的其表示的是当屏幕在600px-900px之间时采用style.css样式来渲染web页面。

四、设备屏幕的输出宽度Device Width

上面的代码指的是iphone.css样式适用于最大设备宽度为480px，比如说iPhone上的显示，这里的max-device-width所指的是设备的实际分辨率，也就是指可视面积分辨率

五、iPhone4

上面的样式是专门针对iPhone4的移动设备写的。

六、iPad

在
大数情况下，移动设备iPad上的Safari和在iPhone上的是相同的，只是他们不同之处是iPad声明了不同的方向，比如说上面的例子，在纵向
(portrait)时采用portrait.css来渲染页面；在横向（landscape）时采用landscape.css来渲染页面。

七、android

/*240px的宽度*/ <link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" /> /*360px的宽度*/ <link rel="stylesheet" media="only screen and (min-device-width:241px) and (max-device-width:360px)" href="android360.css" type="text/css" /> /*480px的宽度*/ <link rel="stylesheet" media="only screen and (min-device-width:361px) and (max-device-width:480px)" href="android480.css" type="text/css" />

我们可以使用media query为android手机在不同分辨率提供特定样式，这样就可以解决屏幕分辨率的不同给android手机的页面重构问题。

八、not关键字

not关键字是用来排除某种制定的媒体类型，换句话来说就是用于排除符合表达式的设备。

九、only关键字

only
用来定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media
Type的设备隐藏样式表的。其主要有：支持媒体特性（Media
Queries）的设备，正常调用样式，此时就当only不存在；对于不支持媒体特性(Media Queries)但又支持媒体类型(Media
Type)的设备，这样就会不读了样式，因为其先读only而不是screen；另外不支持Media
Qqueries的浏览器，不论是否支持only，样式都不会被采用。

十、其他

在Media Query中如果没有明确指定Media Type，那么其默认为all，如：

另外还有使用逗号（，）被用来表示并列或者表示或，如下

上面代码中style.css样式被用在宽度小于或等于480px的手持设备上，或者被用于屏幕宽度大于或等于960px的设备上。

关于Media Query的使用这一节就介绍到此，最后总体规纳一下其功能，个人认为就是一句话：Media Queries能在不同的条件下使用不同的样式，使用页面达到不同的渲染效果。下一节将会针对Media Queries介绍几个实例，如果感兴趣的朋友记得观注本站的更新。

如需转载烦请注明出处：W3CPLUS

@media(max-width:1186px){

}
@media(max-width:979px){
}
@media(min-width:768px)and(max-width:979px){
}
@media(max-width:767px){
}

/*Smallerscreens-----------*/
@media(max-width:480px){
}

/*Smartphones(portraitandlandscape)-----------*/
@mediaonlyscreenand(min-device-width:320px)and(max-device-width:480px){
}

根据不同，样式可以写在其中，你可以去哪个网站上看看，他那里也有更详细的介绍

E. CSS使图片自适应显示宽度代码怎么用

自适应显示宽度代码方法：

一、首先，在网页代码的头部，加入一行viewport元标签。

viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。

所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js。

二、不使用绝对宽度

由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。

具体说，CSS代码不能指定像素宽度：

width:xxx px;

只能指定百分比宽度：

width: xx%;

或者

width:auto;

三、相对大小的字体

字体也不能使用绝对大小（px），而只能使用相对大小（em）。

body {
font: normal 100% Helvetica, Arial, sans-serif;
}

上面的代码指定，字体大小是页面默认大小的100%，即16像素。

h1 {
font-size: 1.5em;
}

然后，h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）。

small {
font-size: 0.875em;
}

small元素的大小是默认大小的0.875倍，即14像素（14/16=0.875）。

四、流动布局（fluid grid）

"流动布局"的含义是，各个区块的位置都是浮动的，不是固定不变的。

.main {
float: right;
width: 70%;
}

.leftBar {
float: left;
width: 25%;
}

float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。

另外，绝对定位（position: absolute）的使用，也要非常小心。

五、选择加载CSS

"自适应网页设计"的核心，就是CSS3引入的Media Query模块。

它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。

上面的代码意思是，如果屏幕宽度小于400像素（max-device-width: 400px），就加载small.css文件。

如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。

除了用html标签加载CSS文件，还可以在现有CSS文件中加载。

六、CSS的@media规则

同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。

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

.column {
float: none;
width:auto;
}

#sidebar {
display:none;
}

}

上面的代码意思是，如果屏幕宽度小于400像素，则column块取消浮动（float:none）、宽度自动调节（width:auto），sidebar块不显示（display:none）。

七、图片的自适应（fluid image）

除了布局和文本，"自适应网页设计"还必须实现图片的自动缩放。

这只要一行CSS代码：

img { max-width: 100%;}

这行代码对于大多数嵌入网页的视频也有效，所以可以写成：

img, object { max-width: 100%;}

老版本的IE不支持max-width，所以只好写成：

img { width: 100%; }

此外，windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令：

img { -ms-interpolation-mode: bicubic; }

或者，Ethan Marcotte的imgSizer.js。

addLoadEvent(function() {

var imgs = document.getElementById("content").getElementsByTagName("img");

imgSizer.collate(imgs);

});

不过，有条件的话，最好还是根据不同大小的屏幕，加载不同分辨率的图片。有很多方法可以做到这一条，服务器端和客户端都可以实现。

F. css实现高度自适应

很简单，利用table的自适应的属性即可。最外层定义一个dispaly:table就好，如果要宽度到左右两边，高度自适应的话，可以这样设置，代码如下：

.ctn{width:100%;display:table;}

G. css高度自适应

方法好些
可以使用js，获取右侧高度然后css赋值左侧这是常用的
其他的方法也有暂时不说了

H. css3怎么实现屏幕自适应

试用css3 语法@media screen and (判断属性){ CSS样式选择器 }
1、DIV+CSS小案例描述
根据整体来设置，设置他们的最大宽度(width)为640px，最小宽度为320px，此类设置适用于手机移动端；要实现屏幕自适应，那么就要用百分比来实现；所以设置width整体100%；img宽度100%；这样实现图片的自由缩放；

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

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

I. css设置div高度自适应

div 默认就是自适应高度，随内容的高度增加，也可以使用样式：<style>.div{ height:auto;}</style>来定义自适应

J. 怎样用css控制图片自适应大小

1、首先用dw编辑器建立了一个静态页面

导航:首页 > 使用方法 > 常用css自适应方法

常用css自适应方法

与常用css自适应方法相关的资料