admin管理员组文章数量:1570427
2019独角兽企业重金招聘Python工程师标准>>>
由于不同设备屏幕等分辨率的不同,所以会导致页面显示的宽度不一致。那么,如何在不同大小的设备上显示同样的网页呢?
一、设置网页宽度自适应
在网页代码的head中,加入viewport标签即可:
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
viewport:是网页默认的宽度和高度
width=device-width :表示宽度是设备屏幕的宽度
initial-scale=1.0:表示初始的缩放比例
minimum-scale=1:表示最小的缩放比例
maximum-scale=1.0:表示最大的缩放比例
user-scalable=no:表示用户是否可以调整缩放比例
上述设置对所有主流浏览器都支持,包括IE9。但是对于老浏览器(如IE6、7、8),则需要使用css3-mediaqueries.js,代码如下:
<!-- [if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode/svn/trunk/css3-mediaqueries.js"></script>
<![endif] -->
二、尽量不使用绝对布局
由于网页会根据屏幕宽度调整布局,所有尽量别使用绝对宽度的布局,也不能使用具有绝对宽度的元素。如css代码不要指定像素宽度:width:xxx px; 而采取百分百宽度:width: xx%; 或者width: auto。
三、相对字体大小
在body设置字体大小100%, 即16px,如body{font: normal 100% Helvetica, Arial, sans-serif;},然后h1{font-size: 1.5em;}这就设置了h1大小是默认大小的1.5倍,即24px。
四、流动布局
.leftBar{float: left; width: 75%;}
.rightBar{float: right; width: 25%;}
float的好处是如同宽度不够,第二个元素则会自动滚动到前面元素的下方,不会在水平溢出,避免水平滚动条的出现。而相反地,绝对定位的话,需要使用到:position:absolute;这个建议使用的时候需要谨慎,尽量少用。
五、选择性加载css
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 300px)" href="smallScreen.css">
这里显示如果屏幕宽度小于300px,就加载smallScreen.css文件。
<link rel="stylesheet" type="text/css" media="screen and (min-width: 300px) and (max-device-width: 500px)" href="middleScreen.css">
如果屏幕宽度在300到500之间,则加载middleScreen.css文件。
上述代码也可以改成直接在css中加载:
@import url("smallScreeen.css") screen and (max-device-width: 300px);
六、@media的使用
@media screeen and (max-device-width: 300px){
div{
display: block;
}
}
这里表示如同屏幕宽度小于300px,则div块显示方式是块级显示的。
七:图片的自适应
通过css代码:img{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);
});
然后实际情况中,最好的方法是根据不同屏幕大小,显示不同大小的照片:
@meta screen and (max-device-width: 300px){ .img{ wdith: 60%;} }
@meta screen and (min-width: 300px) and (max-device-width: 500px) { .img{ width: 100%;} }
转载于:https://my.oschina/u/3640519/blog/1524621
版权声明:本文标题:CSS自适应屏幕宽度 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1727669739a1125038.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论