前往顾页
以后地位: 主页 > 收集编程 > Asp实例教程 >

若何让网页自适应所有屏幕宽度

时候:2018-09-21 23:21来源:知行网www.zhixing123.cn 编辑:麦田守望者

跟着收集与科技的快熟生长,愈来愈多的手机厂商开端打起手机之间的战役,手机的疾速生长也使得愈来愈多的人开端利用手机上彀。挪动装备正超越桌面装备,成为拜候互联网的最多见终端。那么就会呈现一个问题,若何才气让PC端的网页在手机上一般显现?

手机与PC的屏幕宽度有着很年夜的辨别,会造成一样的内容在手机与PC端呈现两种不合的显现成果。那该若何才气使到手机与PC都能对网页闪现出令人对劲的成果呢,陈德馨博客汇集了网页自适应所有屏幕宽度的几种体例,有兴趣的小火伴们可以看下:

1、在网页代码的头部,插手一行viewport元标签。


CSS
<meta name="viewport" content="width=device-width,initial-scale=1" />1

viewport是网页默许的宽度和高度,下面这行代码的意义是,网页宽度默许即是屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始年夜小占屏幕面积的100%。

重视:该体例不支撑IE8及IE8以下的版本

2、不利用绝对宽度

因为网页会按照屏幕宽度调剂布局,所以不克不及利用绝对宽度的布局,也不克不及利器具有绝对宽度的元素。对图象来讲也是如许。


详细说,CSS代码不克不及指定像素宽度:width:xxx px; 只能指定百分比宽度: width: xx%; 或 width:auto;

3、利用相对年夜小的字体

字体也不克不及利用绝对年夜小(px),只能利用相对年夜小(em或rem)比方:


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

下面的代码指定,字体年夜小是页面默许年夜小的100%,即16像素(1em=16px)。

而如许定义的h1标签的年夜小是默许年夜小的1.5倍,即24像素(24/16=1.5),将想要的像素去除默许的16像素可以获得em。

4、活动布局(fluid grid)

"活动布局"的含义是,各个区块的地位都是浮动的,不是牢固不变的。


CSS
.main {float: right;width: 70%; }
.leftBar {float: left;width: 25%;}12

float的好处是,如果宽度太小,放不下两个元素,前面的元素会主动动弹到前面元素的下方,不会在程度标的目标overflow(溢出),避免了程度动弹条的呈现。

5、媒体查询器@media

"自适应网页设想"的核心,就是CSS3引入的MediaQuery模块。它的意义就是,主动探测屏幕宽度,然后加载呼应的CSS文件。


CSS
<link rel="stylesheet" type="text/css"media="screen and (max-device-width:400px)"href="tinyScreen.css" />1

下面的代码意义是,如果屏幕宽度小于400像素(max-device-width: 400px),就加载tinyScreen.css文件。


CSS
<link rel="stylesheet" type="text/css"media="screen and (min-width: 400px)and (max-device-width: 600px)"href="smallScreen.css" />1

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

------分开线----------------------------
标签(Tag):网页自适应
------分开线----------------------------
保举内容
猜你感兴趣