推广 热搜: 劳务  海南  2024  合同  江苏  云南  劳务系统  2023  劳务派遣管理软件  劳务派遣管理系统 

网页自适应设计方法

   2024-06-10 90
核心提示:p网页子适应设计方法,只需维护一个网页代码,即可在多种浏览器正常显示。1、不同屏幕分辨率处理。以下代码可以让屏幕宽度低于48
<p>网页子适应设计方法,只需维护一个网页代码,即可在多种浏览器正常显示。1、不同屏幕分辨率处理。以下代码可以让屏幕宽度低于480像素的设备(如iPhone等),网页侧栏隐藏中部内容栏宽度自动调节。以下为示例代码,只需修改一下即可。@mediascreenand(max-device-width:480px){#divMain{fl劳务派遣系统软件t:none;width:auto;}#divSidebar{display:none;}}2、viewport标签。在HTML文件的上方,增加viewportmeta标签,增加此标签的目的是为了告诉浏览器视口宽度等于设备屏幕宽度,不进行初始缩放处理。<metaname="viewport"content="width=device-width,initial-scale=1"/> 此标签不支持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、布局宽度网页总体框架可以使用绝对宽度,但往下的内容框架、侧栏等最好使用相对宽度,这样针对不同分辨率进行修改就方便。当然也可以不用相对宽度,那就需要在@mediascreenand(max-device-width:480px)里面增加各个div的针对小屏幕的宽度,实际上更麻烦。 5、页面使用相对字体(非必要) 在HTML页面上不要使用绝对字体(px),而要使用相对字体(em),对于大多数浏览器来说,通常用em=px/16换算,例如16px就等于1em。</p>
 
反对 0举报 0 收藏 0 打赏 0评论 0
 
更多>同类资讯
推荐图文
推荐资讯
点击排行
网站首页  |  关于我们  |  联系方式  |  使用协议  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  粤ICP备18079127号  |  粤ICP备18079127号