下面是图片不失真但不保证是否完全铺满(留有空隙或者超出屏幕)的css代码:
1、横向铺满,纵向留有空隙或超出屏幕:
body {background:url(图片路径) no-repeat centerbackground-size:100% auto}
2、纵向铺满,横向留有空隙或超出屏幕:
body {background:url(图片路径) no-repeat centerbackground-size:auto 100%}
补充说明:background-size属于css3,只有支持css3的浏览器才有效。
电脑(Computer)是一种利用电子学原理根据一系列指令来对数据进行处理的机器。电脑可以分为两部分:软件系统和硬件系统。第一台电脑是1946年2月15日在美国宾夕法尼亚大学诞生的ENIAC通用电子计算机。
人们把没有安装任何软件的计算机称为裸机。随着科技的发展,现在新出现一些新型计算机有:生物计算机、光子计算机、量子计算机等。
方法一、根据分辨率使用不同的CSS文件屏幕分辨率小于768像素时生效:
<link rel="stylesheet" media="screen and (max-device-width: 768px)" href="mobile.css">屏幕分辨率大于1000时生效:
<link rel="stylesheet" media="screen and (min-device-width: 1000px)" href="mobile.css">方法二、在CSS中判断不同分辨率
屏幕分辨率小于768像素时生效:
@media (max-width: 768px) {.div1 {
font-size: 16px
}
}
1. 用百分比实现 width:50%,这样会根据屏幕的大小来自适应宽度
(插一条calc的属性详解)
vw :Viewport width,即容器(可以是div)的宽度,默认1vw=整个视窗宽度的1%,全屏为100vw。比如视窗宽度为1200px,1vw=120px=1200px*1%,如果是满屏就则为100vw=1200px。
vh :Viewport height,即容器(如div)的高度,默认1vh=整个可视窗口高度的1%,全屏是100vh。
2. calc(100vmin)也可以达到自适应的效果,但还是用起来效果一般
3. calc(100vw - px) vw是根据屏幕的大小来计算的,屏幕缩小,100vw也会变大