设为首页 加入收藏

手机版 郑州清新教育-郑州电脑设计培训学校典范,专业课程包括:室内家装建筑装饰设计培训学习班,平面广告网页美工动漫设计培训,淘宝开店美工运营推广网站手机开发培训等课程
郑州清新教育电话

当前位置:首页 > 网页美工设计

网页美工设计

自适应网页设计制作的方法和技巧

编辑: 时间:2017-05-04 21:54:44

   随着越来越多的人使用手机上网,使自适应网页设计技术变得越来越流行。自适应网页设计指能使网页自适应显示在不同大小终端设备上新网页设计方式及技术。当然,对一个新手来说可能听起来有点复杂,其实它比你想象的简单多了(前提你有css基础)。

  你要做一个自适应网站,首先你要了解什么是自适应布局。自适应布局就是一个网站能兼容适配多个终端,不需要再为每个终端做一个特定的版本。省去了其他终端重新开放的麻烦。一个自适应网站的建设,首先你做的是网页的设计,一个网站是通过多个网页搭建而成的。自适应网页设计你需要做的是:1、允许网页宽度自动调整。2、相对大小的字体。3、不能使用绝对宽度。4、流动布局。

  响应式网页设计优势:流体网格的网站适合响应式网页设计。

  1、灵活性强,可以一个网站兼容多个不同终端;

  2、方便快捷的解决多设备显示适应问题;

  虽然响应式/自适应网页设计会带来兼容各种设备,但是它也有缺点,工作量大、代码累赘、加载时间长,它们能“一次设计,普遍适用”,可以根据屏幕分辨率自适应以及自动缩放图片、自动调整布局,它们不只是技术的实现,更多的是对于设计的全新思维模式。对于这些缺点,然而后面的技术给响应式问题进行了优化。

  1、在HTML头部增加viewport标签。在网站HTML文件的开头,增加viewportmeta标签告诉浏览器视口宽度等于设备屏幕宽度,且不进行初始缩放。代码如下:

  这段代码支持Chrome、Firefox、IE9以上的浏览器,但不支持IE8以及低于IE8的浏览器。

  2、在CSS文件尾部增加针对不同屏幕分辨率的规则。例如使用如下的代码,可以让屏幕宽度低于480像素的设备(如iPhone等),网页侧栏隐藏中部内容栏宽度自动调节。

  @mediascreenand(max-device-width:480px){

  #divMain{

  float:none;

  width:auto;

  }

  #divSidebar{

  display:none;

  }

  }

  3、布局宽度使用相对宽度。

  网页总体框架可以使用绝对宽度,但往下的内容框架、侧栏等最好使用相对宽度,这样针对不同分辨率进行修改就方便。当然也可以不用相对宽度,那就需要在@mediascreenand(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%;

求学问答专业答复,快速响应
电话:0371-63218905
手机:13613841515
QQ:
有问题需要老师在线解答? 立即提问 马上回复
更多 热门课程排行榜
郑州清新教育电脑学校

室内家装设计知识平面广告设计知识网页美工设计知识

模具机械设计知识电脑办公文秘知识游戏动漫设计知识

郑州清新教育电脑学校

清新教育新闻资讯清新教育报班选课清新教育就业服务

关于清新教育联系清新教育清新教育乘车路线

关于我们 版权所有:郑州清新教育(www.qingxinedu.cn)备案号:豫ICP备11011661号