您好，欢迎来到彤云网络官网！ 武汉网站建设外包公司，让我们一起见证企业成长！
  • 服务热线：15926399978
  • 加入收藏
  • 繁體中文
  • 网站地图
  • 联系我们
彤云网络 > 资讯中心 > 网站建设 > 正文
搜索

怎样将电脑网站修改成适合 响应式自适应网页实现方法

头像彤云网络

阅览数

时间2017-11-29 18:21:00
　　移动互联网早就来临，电脑访问网站的也来越少，那么以前的只有电脑网站怎样改成适合手机浏览呢，一般手机网站有独立建一个手机网站的方法，也有将当前电脑网站修改成响应式自适应网页实现方法，适合在所有分辨率浏览。

 
　　Google进行了一次在线讲座，讲述自适应网页设计的概念和方法，维护同一个网页代码，即可使网站在多种浏览设备（从桌面电脑显示器到智能手机或其他移动产品设备）上具有更好的阅读体验，这里我将该讲座内容简要的整理一下。
 
　　1、在HTML头部增加viewport标签。
 
　　在网站HTML文件的开头，增加viewport meta标签告诉浏览器视口宽度等于设备屏幕宽度，且不进行初始缩放。代码如下：
 
　　<meta name="viewport" content="width=device-width, initial-scale=1" />
 
　　这段代码支持Chrome、Firefox、IE9以上的浏览器，但不支持IE8以及低于IE8的浏览器。
 
　　2、在CSS文件尾部增加针对不同屏幕分辨率的规则。
 
　　例如使用如下的代码，可以让屏幕宽度低于480像素的设备（如iPhone等），网页侧栏隐藏中部内容栏宽度自动调节。以下代码针对Z-Blog，WordPress相关标签名称只需修改一下即可。
 
　　@media screen and (max-device-width: 480px) {
 
　　#divMain{
 
　　float: none;
 
　　width:auto;
 
　　}
 
　　#divSidebar {
 
　　display:none;
 
　　}
 
　　}
 
　　3、布局宽度使用相对宽度。
 
　　网页总体框架可以使用绝对宽度，但往下的内容框架、侧栏等最好使用相对宽度，这样针对不同分辨率进行修改就方便。当然也可以不用相对宽度，那就需要在 @media screen and (max-device-width: 480px) 里面增加各个div的针对小屏幕的宽度，实际上更麻烦。
 
　　4、页面使用相对字体（非必要）
 
　　在HTML页面上不要使用绝对字体（px），而要使用相对字体（em），对于大多数浏览器来说，通常用 em = px/16 换算，例如16px就等于1em。
 
　　5、图片自适应（非必要）
 
　　img标签的话，只需要设置 max-width: 100%;或width:100%; 语句为：img { max-width: 98%; }
 
　　css加载的background-image如何自适应大小呢，其实CSS3中是可以实现的，添加如下语句：background-size:100% 100%;
 
　　根据上面讲述的几点内容，我针对我博客的CSS进行了一些修改，发现可以从iPhone手机浏览到体验更佳的页面，但有一个问题没有解决，就是顶部导航栏navbar显示有问题，换行后被下面的文章盖住了，不知道怎样能更好地解决这个问题（更新：经过网友提示，在导航栏divNavbar的样式里，加入  white-space:nowrap; overflow:hidden;  即可解决这个问题）。
网页 方法 电脑
快给朋友分享吧！

非特殊说明，本文版权原作者，转载请注明出处

本文地址： http://www.whtongyun.com/news/153.html

行业最新资讯 MORE

  • 武汉H5建网站与传统建网站优劣对比
  • 武汉企业做网站有哪些好处
  • 武汉网站建设公司:如何做一个赚钱的企业网站
  • 武汉做网站：做网站最不能做的三件事
  • 武汉做网站：如何快速进行原创网站模版制作
  • 您有一份武汉网站制作方案请查收
  • 建网站哪个CMS好
  • 网站做好后每年要续费吗

最新项目展示

  • 案例文案 塞阀收款方...
    武汉敏捷标识营销型网站建设
    营销型网站建设,淘宝店铺设计
  • 文都留学官方网站...
    文都留学官方网站
    文都留学官方网站建设
官方微信

武汉网站建设,武汉做网站,武汉做网站公司,武汉网站制作,武汉网站设计,武汉营销型网站建设，首选武汉彤云网络科技有限公司
手机：15926399978  传真：027-87384677  网址： http://www.whtongyun.com  全国客服电话：027-87384677
Copyright  2015-2016  版权所有  ©  武汉彤云网络科技有限公司  鄂ICP备16010408号-2

微信扫一扫，免费获取建站方案

微信客服

深圳坪山网站建设公司绵阳英文网站建设报价海南建设网站报价孝感百度竞价公司连云港网站建设设计哪家好镇江网络营销石家庄网站改版推荐萍乡建设网站报价海南百姓网标王推广价格常德百搜标王公司内江百搜标王哪家好民治百姓网标王推广多少钱平凉网站推广工具推荐台州如何制作网站重庆高端网站设计黄冈百度seo多少钱湘潭网站制作设计多少钱铜仁企业网站建设清徐网站搭建多少钱甘孜seo网站优化哪家好荷坳网站优化按天收费推荐盘锦网络营销价格乐山网站优化报价喀什百搜标王推荐荷坳品牌网站设计多少钱洛阳网站建设推荐上海至尊标王盐城百度关键词包年推广公司商洛网站推广方案爱联seo公司黔东南网络营销报价香港通过《维护国家安全条例》两大学生合买彩票中奖一人不认账让美丽中国“从细节出发”19岁小伙救下5人后溺亡 多方发声卫健委通报少年有偿捐血浆16次猝死汪小菲曝离婚始末何赛飞追着代拍打雅江山火三名扑火人员牺牲系谣言男子被猫抓伤后确诊“猫抓病”周杰伦一审败诉网易中国拥有亿元资产的家庭达13.3万户315晚会后胖东来又人满为患了高校汽车撞人致3死16伤 司机系学生张家界的山上“长”满了韩国人？张立群任西安交通大学校长手机成瘾是影响睡眠质量重要因素网友洛杉矶偶遇贾玲“重生之我在北大当嫡校长”单亲妈妈陷入热恋 14岁儿子报警倪萍分享减重40斤方法杨倩无缘巴黎奥运考生莫言也上北大硕士复试名单了许家印被限制高消费奥巴马现身唐宁街 黑色着装引猜测专访95后高颜值猪保姆男孩8年未见母亲被告知被遗忘七年后宇文玥被薅头发捞上岸郑州一火锅店爆改成麻辣烫店西双版纳热带植物园回应蜉蝣大爆发沉迷短剧的人就像掉进了杀猪盘当地回应沈阳致3死车祸车主疑毒驾开除党籍5年后 原水城县长再被查凯特王妃现身！外出购物视频曝光初中生遭15人围殴自卫刺伤3人判无罪事业单位女子向同事水杯投不明物质男子被流浪猫绊倒 投喂者赔24万外国人感慨凌晨的中国很安全路边卖淀粉肠阿姨主动出示声明书胖东来员工每周单休无小长假王树国卸任西安交大校长 师生送别小米汽车超级工厂正式揭幕黑马情侣提车了妈妈回应孩子在校撞护栏坠楼校方回应护栏损坏小学生课间坠楼房客欠租失踪 房东直发愁专家建议不必谈骨泥色变老人退休金被冒领16年 金额超20万西藏招商引资投资者子女可当地高考特朗普无法缴纳4.54亿美元罚金浙江一高校内汽车冲撞行人 多人受伤

深圳坪山网站建设公司 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化