淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 13342|回复: 77
收起左侧

【欲设原创】网页自适应设计

  [复制链接]
  • TA的每日心情
    臭美
    2014-2-20 08:00
  • 签到天数: 23 天

    连续签到: 1 天

    [LV.4]初窥堂奥

    10

    主题

    76

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    18286

    发表于 2014-2-5 14:09:08 | 显示全部楼层 |阅读模式
    本帖最后由 VICKI 于 2014-2-5 14:13 编辑

    何为网页自适应:2010年,Ethan Marcotte提出了"自适应网页设计"(Responsive Web Design)这个名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计,这就是自适应网页设计。

    为什么淘宝要做自适应网页:或许有些人想做类似这种网页的图片效果:https://lowdi.com/但是呢,在淘宝里面呢,这种图片如果改变网页的分辨率的百分比图片就会随着半分比的增大而增大,缩小而缩小,就达不到理想的效果了,所以这时候就需要我们做成自适应网页。

    由于淘宝不支持全屏代码的自适应(我亲测没成功),所以我用的是悬浮代码加自适应,自适应的一条注意事项:
    *不能使用绝对宽度(px ),要使用像素宽度 ( % )*很重要!


    那我们做图片的时候要做宽度多少的呢?

    *PC的屏幕宽度,一般都在1000像素以上(目前主流宽度是1366×768),有的还达到了2000像素。所以宽度做1366像素(px )就可以了,高度随便*


    代码详情:
    1. <font size="1"><div class="J_TWidget" data-widget-config="{'effect':'scrollx','contentCls':'content_yushe','navCls':'nav_yushe','autoplay':true,'activeTriggerCls':'.cbu-iframe','activeIndex':2,'duration':0.1,'interval':0.1}" data-widget-type="Carousel">
    2.   <ul class="content_yushe" style="display:none;">
    3.     <li style="width:100%;height:10px;">
    4.        </li>
    5.   </ul>
    6.   <ul class="nav_yushe">
    7.     <li style="width:100%;height:100%;left:0%;top:0%;overflow:auto;">
    8.       <div class="footer-more-trigger" style="width:100%;height:100%;border:0;padding:0;top:0px;left:0%;background:#0099FF;">
    9.         <img src="http://img02.taobaocdn.com/imgextra/i2/387284244/T23Ia4Xy8aXXXXXXXX_!!387284244.png" style="width:100%;height:auto;clear:both;vertical-align:top;" /></div>
    10.     </li>
    11.   </ul>
    12. </div></font>
    复制代码
    注:高度要使用AUTO,宽度要用100%


    效果预览http://haihuyundonghuwai.taobao.com/p/rd005184.htm,不管网页放大缩小,图片大小保持不变!




    评分

    参与人数 8美工币 +183 收起 理由
    stupidhl + 8 很给力!
    ajiang929 + 20 很给力!
    蓝石头 + 20 很给力!
    飞鱼美梦 + 10
    阿银 + 10 技术活必须赞一个
    一天构思 + 5 感谢分享!
    free + 10 技术贴要支持
    gxzhou + 100 感谢分享!

    查看全部评分

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    抱抱
    2014-4-6 12:25
  • 签到天数: 20 天

    连续签到: 1 天

    [LV.4]初窥堂奥

    2

    主题

    14

    帖子

    5985

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    5985

    发表于 2014-2-5 15:32:43 | 显示全部楼层
    先收藏了

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    思考
    2014-3-12 22:04
  • 签到天数: 55 天

    连续签到: 1 天

    [LV.5]略有小成

    10

    主题

    109

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    27322

    发表于 2014-2-5 16:25:45 | 显示全部楼层
    你的意思是用footer-more-trigger+100%??? 你这个是轮播代码

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    吐舌头
    2016-2-24 09:03
  • 签到天数: 107 天

    连续签到: 1 天

    [LV.6]渐入佳境

    12

    主题

    209

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    18942

    发表于 2014-2-5 22:47:33 | 显示全部楼层
    好像很厉害的养子~~

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情

    2015-10-13 00:46
  • 签到天数: 387 天

    连续签到: 1 天

    [LV.9]已臻大成

    2

    主题

    340

    帖子

    9万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    92911

    最佳新人热心会员

    发表于 2014-2-6 00:23:51 | 显示全部楼层
    真厉害
    瞧创意家居欢迎大家的到来
  • TA的每日心情
    思考
    2014-1-3 22:41
  • 签到天数: 11 天

    连续签到: 1 天

    [LV.3]武林新秀

    5

    主题

    58

    帖子

    5478

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    5478

    最佳新人

    发表于 2014-2-6 02:47:09 | 显示全部楼层
    本帖最后由 才恩吉雅 于 2014-2-6 02:52 编辑

    能行吗,

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    抱抱
    2015-10-4 09:54
  • 签到天数: 388 天

    连续签到: 1 天

    [LV.9]已臻大成

    15

    主题

    181

    帖子

    7万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    74109

    最佳新人热心会员宣传达人

    发表于 2014-2-6 07:38:47 | 显示全部楼层
    全部悬浮代码不累死啊,而且定位还要费事

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    心跳
    2014-6-11 17:08
  • 签到天数: 22 天

    连续签到: 1 天

    [LV.4]初窥堂奥

    2

    主题

    75

    帖子

    3996

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    3996

    发表于 2014-2-7 09:58:51 | 显示全部楼层
    楼猪。。。你的代码被屏蔽了吧。。。。
    QQ截图20140207095821.png

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    臭美
    2014-3-31 09:18
  • 签到天数: 51 天

    连续签到: 1 天

    [LV.5]略有小成

    0

    主题

    58

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    28035

    发表于 2014-2-7 12:08:22 | 显示全部楼层
    快到碗里来!我收!

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    委屈
    14 小时前
  • 签到天数: 1268 天

    连续签到: 15 天

    [LV.10]功行圆满

    9

    主题

    345

    帖子

    29万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    292546

    最佳新人热心会员宣传达人

    发表于 2014-2-7 13:09:45 | 显示全部楼层
    打开效果跟8楼一样~
    不是很懂什么意思,,

    想飞到那更高更远最洒脱!想拥抱在最美丽的那一刻!
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    小黑屋|Archiver|手机版|坛主个人微信公众号|粤公网安备44060502000322号|淘宝美工论坛 ( 桂ICP备12007265号-8 )  

    GMT+8, 2017-5-22 23:38 , Processed in 0.310950 second(s), 32 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表