电话:18529139987
关闭
您当前的位置:首页 > 职场资讯 > 江西劳务派遣系统

网页自适应设计方法

来源:劳务派遣系统 时间:2021-10-15 作者:劳务派遣系统 浏览量:

网页子适应设计方法,只需维护一个网页代码,即可在多种浏览器正常显示。

1、不同屏幕分辨率处理。

  以下代码可以让屏幕宽度低于480像素的设备(如iPhone等),网页侧栏隐藏中部内容栏宽度自动调节。以下为示例代码,只需修改一下即可。

@media screen and (max-device-width: 480px) {

? #divMain{

? fl劳务派遣系统软件t: none;

? width:auto;

? }

? #divSidebar {

? display:none;

? }

}

  2、viewport标签。

  在HTML文件的上方,增加viewport meta标签,增加此标签的目的是为了告诉浏览器视口宽度等于设备屏幕宽度,不进行初始缩放处理。

  

?

  此标签不支持IE8以及低于IE8的浏览器,支持Chrome、Firefox、IE9以上的浏览器

?

  3、图片自适应

?

  img标签的话,只需要设置 max-width: 100%;或width:100%; 语句为:img { max-width: 98%; }

?

  css加载的background-image如何自适应大小呢,其实CSS3中是可以实现的,添加如下语句:background-size:100% 100%;

?

  4、布局宽度

  网页总体框架可以使用绝对宽度,但往下的内容框架、侧栏等最好使用相对宽度,这样针对不同分辨率进行修改就方便。当然也可以不用相对宽度,那就需要在 @media screen and (max-device-width: 480px) 里面增加各个div的针对小屏幕的宽度,实际上更麻烦。

?

  5、页面使用相对字体(非必要)

?

  在HTML页面上不要使用绝对字体(px),而要使用相对字体(em),对于大多数浏览器来说,通常用 em = px/16 换算,例如16px就等于1em。

微信扫一扫分享资讯
分享到:
热门话题
推荐文章
微信公众号
手机浏览

东莞市顺捷建筑工程有限公司 粤ICP备18079127号

地址: EMAIL:admin@admin.com

Powered by PHPYun.

用微信扫一扫