css自适应?

发布网友 发布时间：2024-09-25 15:32

我来回答

共1个回答

热心网友 时间：2024-11-20 17:32

1、标签比如是块状元素，并且有个确定的宽度，百分比的宽度也行；padding的话,设置成auto它会自动继承浏览器的padding值，因为有些奇葩浏览器是默认有padding值的，为了避免这个对样式造成影响，样式开头一般会加上一句*{margin:0;padding:0};。

2、自适应，一般是自适应屏幕大小，比如我们的电脑、手机都有很多不同尺寸的屏幕，那么做出来的页面就要兼容这种尺寸的变化，而不会让布局错乱。

3、一般PC端布局样式是用百分比，不过移动端的话，因为对css3的兼容性非常好，所有要达到自适应，可以用css3来布局，当然还有比较流行的响应式布局。

4、层叠样式表(英文全称:CascadingStyleSheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

5、CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

如何用CSS使图片自适应显示宽度公司的专案中需要显示由使用者提供URI连结的图片，可是预先无法获知图片的尺寸大小，如果图片尺寸过大将会影响页面布局。最理想的解决方案自然是自动生成缩图，涉及的后台工作较为复杂，用CSS进行控制是一个可以接受的捷径。如果用width属性强行设定显示尺寸似乎太不智慧。幸好Firefox/Opera/IE7都提供了max-width属性支援。假定希望图片显示宽度不超过500画素，CSS可能如下：以下是引用片段：以下是引用片段：fit-image{border:0;max-width:500px;}IE6不支援max-width属性，但是利用IE独有的expression属性可以迂回的解决这个问题。以下是引用片段：以下是引用片段：fit-image{border:0;max-width:500px;width:expression(function(img){img.onload=function(){this.style.width=’’;this.style.width=(this.width500)?"500px":this.width+"px"};return’120px’载入时显示宽度为120px}(this));}利用img的onload事件使图片载入完成后计算其尺寸大小，如果超过500画素就显示为500画素，否则显示其预设宽度。expression不是符合WEB标准的做法，不到万不得以不建议使用。但是不能不承认IE的很多扩充套件是不错的，IE不应该被轻视!

CSS程式码如何使图片自适应显示宽度

图片尺寸过大将会影响页面布局。最理想的解决方案自然是自动生成缩图，涉及的后台工作较为复杂，用CSS进行控制是一个可以接受的捷径。如果用width属性强行设定显示尺寸似乎太不智慧。幸好Firefox/Opera/IE7都提供了max-width属性支援。假定希望图片显示宽度不超过500画素，CSS可能如下：以下是引用片段：以下是引用片段：

fit-image{

border:0;

max-width:500px;

}IE6不支援max-width属性，但是利用IE独有的expression属性可以迂回的解决这个问题。以下是引用片段：以下是引用片段：

fit-image{

border:0;

max-width:500px;

width:expression(

function(img){

img.onload=function(){

this.style.width=(this.width500)?"500px":this.width+"px"};return’120px’载入时显示宽度为120px}(this));}利用img的onload事件使图片载入完成后计算其尺寸大小，如果超过500画素就显示为500画素，否则显示其预设宽度。expression不是符合WEB标准的做法，不到万不得以不建议使用。但是不能不承认IE的很多扩充套件是不错的，IE不应该被轻视!

css怎么让图片自适应

看什么情况了

一是通过将该图片设定为某个div的背景图片，然后该div的长宽不使用绝对的px，使用相对的em或者rem。

二是将图片设定display：block，设定图片的长宽为rem或者em。

还是要看是什么情况下来去自适应图片的，

如何使用CSS强制图片自适应大小

!DOCTYPEPUBLIC"-W3CDTDXHTML1.0TransitionalEN"":w3./TR/x1/DTD/x1-transitional.dtd"

xmlns=":w3./1999/x"

head

meta-equiv="Content-Type"content="text/;charset=gb2312"/

title无标题文件/title

styletype=text/css

img{width:expression(this.width600?"580px":this.width+"px");}

/style

/head

body

图片宽度大于600画素都强制显示为580画素宽brbr

div

imgsrc=:makewing./lanren/wallpaper/wallpaper-0013.jpg/

/div

/body

/

如何是页面上的图片自适应页面宽度？

imgwidth=100%src=a1.jpg

如何用纯CSS将图片填满div，自适应容器大小

将图片的宽和高的属性设定为100%即可

例如图片的类名为pic

.pic{width:100%;height:100%}

如何让input宽度自适应?

很多时候文字框输入的内容是不固定的，有时候输入的内容多一些需要宽一些有时候输入的内容少一些需要窄一些，所以需要设定input的宽度自适应。

工具原料：编辑器、jQuery

1、解决宽度自适应的思路是使用jQuery来监听输入事件，进而进行动态的改变input的宽度，实现input宽度自适应的效果。

2、首选获取文字的宽度，利用pre元素可定义预格式化的文字，被包围在pre元素中的文字通常会保留空格和换行符;而文字也会呈现为等宽字型，简单的程式码示例如下：

vartextWidth=function(text){varsensor=$('pre'+text+'/pre').css({display:'none'});$('body').append(sensor);varwidth=sensor.width();sensor.remove();returnwidth;};

3、根据以上获取到的文字的宽度来给input系结事件动态改变宽度，简单的程式码示例如下：

$("input").unbind('keydown').bind('keydown',function(){$(this).width(textWidth($(this).val()));});

input高度固定，自动增宽br

inputtype=textclass="page_speeder_863029014"

br

br

textarea宽度固定，自动增高br

textareatype=textclass="page_speeder_1875386613"/textarea

1.用百分比实现width:50%,这样会根据屏幕的大小来自适应宽度

（插一条calc的属性详解）

vw：Viewportwidth，即容器（可以是div）的宽度，默认1vw=整个视窗宽度的1%，全屏为100vw。比如视窗宽度为1200px，1vw=120px=1200px*1%，如果是满屏就则为100vw=1200px。

vh：Viewportheight，即容器（如div）的高度，默认1vh=整个可视窗口高度的1%，全屏是100vh。

2.calc（100vmin）也可以达到自适应的效果，但还是用起来效果一般

3.calc(100vw-px)?vw是根据屏幕的大小来计算的，屏幕缩小，100vw也会变大