文档章节

CSS自适应屏幕宽度

陌离小小
 陌离小小
发布于 2017/08/27 21:22
字数 732
阅读 181
收藏 0
CSS

    由于不同设备屏幕等分辨率的不同,所以会导致页面显示的宽度不一致。那么,如何在不同大小的设备上显示同样的网页呢?

一、设置网页宽度自适应

    在网页代码的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.com/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%;} }

    

    

© 著作权归作者所有

陌离小小
粉丝 0
博文 19
码字总数 9403
作品 0
私信 提问
自适应网页设计/响应式Web设计2

随着3G的普及,越来越多的人使用手机上网。 移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的...

山哥
2012/05/25
177
0
响应式和自适应区别

玩前端也有几个月了,发现大家普遍混淆了响应式和自适应的概念。先给大家体验一下响应式和自适应的区别,请放大缩小一下屏幕尝试 自适应的体验http://m.ctrip.com/html5/ 响应式的体验 http...

前端_牛牛
2016/01/20
385
2
自适应网页设计的方法(手机端良好的访问体验)

昨天中午Google进行了一次在线讲座,讲述自适应网页设计的概念和方法,维护同一个网页代码,即可使网站在多种浏览设备(从桌面电脑显示器到智能手机或其他移动产品设备)上具有更好的阅读体验...

DanielYue
2018/06/29
0
0
关于web中的自适应布局

一、”自适应网页设计”的概念 2010年,Ethan Marcotte提出了“自适应网页设计”(Responsive Web Design)--这个名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。 二、允许网页宽...

名字已被取
2016/04/15
97
0
自适应网页设计(Responsive Web Design)

随着3G的普及,越来越多的人使用手机上网。 移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的...

阮一峰
2012/05/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OpenStack 简介和几种安装方式总结

OpenStack :是一个由NASA和Rackspace合作研发并发起的,以Apache许可证授权的自由软件和开放源代码项目。项目目标是提供实施简单、可大规模扩展、丰富、标准统一的云计算管理平台。OpenSta...

小海bug
昨天
7
0
DDD(五)

1、引言 之前学习了解了DDD中实体这一概念,那么接下来需要了解的就是值对象、唯一标识。值对象,值就是数字1、2、3,字符串“1”,“2”,“3”,值时对象的特征,对象是一个事物的具体描述...

MrYuZixian
昨天
6
0
数据库中间件MyCat

什么是MyCat? 查看官网的介绍是这样说的 一个彻底开源的,面向企业应用开发的大数据库集群 支持事务、ACID、可以替代MySQL的加强版数据库 一个可以视为MySQL集群的企业级数据库,用来替代昂贵...

沉浮_
昨天
7
0
解决Mac下VSCode打开zsh乱码

1.乱码问题 iTerm2终端使用Zsh,并且配置Zsh主题,该主题主题需要安装字体来支持箭头效果,在iTerm2中设置这个字体,但是VSCode里这个箭头还是显示乱码。 iTerm2展示如下: VSCode展示如下: 2...

HelloDeveloper
昨天
9
0
常用物流快递单号查询接口种类及对接方法

目前快递查询接口有两种方式可以对接,一是和顺丰、圆通、中通、天天、韵达、德邦这些快递公司一一对接接口,二是和快递鸟这样第三方集成接口一次性对接多家常用快递。第一种耗费时间长,但是...

程序的小猿
昨天
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部