网页设计:自适应网页所有屏幕宽度解析
随着网络与科技的快熟发展,越来越多的手机厂商开始打起手机之间的战争,手机的快速发展也使得越来越多的人开始使用手机上网。移动设备正超过桌面设备,成为访问互联网的最常见终端。那么就会出现一个问题,如何才能让PC端的网页在手机上正常显示?欢迎大家阅读!更多相关信息请关注相关栏目!
手机与PC的屏幕宽度有着很大的区别,会造成同样的内容在手机与PC端出现两种不同的显示结果。那该如何才能使得手机与PC都能对网页呈现出令人满意的结果呢,本文收集了以下几种方法,有兴趣的小伙伴们可以看下:
1、在网页代码的头部,加入一行viewport元标签。
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)
例如: body
上面的代码指定,字体大小是页面默认大小的100%,即16像素(1em=16px)。
h1
h1的大小是默认大小的`1.5倍,即24像素(24/16=1.5)
将想要的像素去除默认的16像素可以得到em
4、流动布局(fluid grid)
"流动布局"的含义是,各个区块的位置都是浮动的,不是固定不变的。
Bar
float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。
5、媒体查询器@media
"自适应网页设计"的核心,就是CSS3引入的MediaQuery模块。
它的意思就是,自动探测屏幕宽度,然后加载相应的CSS文件。
上面的代码意思是,如果屏幕宽度小于400像素(max-device-width: 400px),就加载文件。
如果屏幕宽度在400像素到600像素之间,则加载文件。
-
jQuery中的read和JavaScript中的onload函数的区别在哪
在JavaScript中,onload函数是最经常使用的,几乎涉及到JavaScript的童鞋都少不了要接触它。这个函数的作用就是等待网页完全装载完了以后再去执行代码块内的语句,因为按照文档流的执行顺序,通常用于头部加载JavaScript的`时候需要用到。复制代码代码如下:ad=functio...
-
javascript中setInterval的用法总结
javascript中的setInterval的函数主要是在制作动画或其他间隔性渲染(操作)效果时,对操作方法按照一定时间间隔进行调用的函数。setInterval的表达式格式主要有:setInterval(fnname,time,par1,par2,);setInterval(obj,fnname,time,par1,par2,);第一种是最常见的表达...
-
网站设计首页要注意的事项
网站设计首页的时候要注意些什么?哪些是必须要注意的?下面就来和小编一起看看网站设计首页要注意的事项吧。1.用户友好性:提高首页的用户友好性,能够大大增加留住用户的可能性,更进一步的`话则是能提高用户的黏着度,取得良好的用户转化效益。而用户的友好性主要体...
-
HTML5教程:画布Canvas基础知识讲解
Canvas是HTML5最让人期待的特性之一,目前已获得大部分Web浏览器支持Canvas可以帮助创建游戏、增强图形用户界面。下面YJBYS小编为大家带来画布Canvas基础知识,希望对大家学习有所帮助!HTML5规范引进了很多新特性,其中最令人期待的之一就是Canvas元素。HTML5Canvas...