{{sellerTotalView > 1 ? __("sellers", {number: sellerTotalView}) : __("seller", {number: sellerTotalView}) }}, {{numTotalView > 1 ? __("items", {number: numTotalView}) : __("item", {number: numTotalView}) }}
무료배송

배송 지역 전환

지역에 따라 재고 및 배송 속도가 다를 수 있습니다.

위치 기록

{{email ? __('Got it!') : __('Restock Alert')}}

상품입고 후 바로 알려드리겠습니다.

취소
Yami

Jingdong book

学习响应式设计

{{buttonTypePin == 3 ? __("Scan to view more PinGo") : __("Scan to start")}}

学习响应式设计

{{__(":people-members", {'people': item.limit_people_count})}} {{ itemCurrency }}{{ item.valid_price }} {{ itemCurrency }}{{ item.invalid_price }} {{ itemDiscount }}
후 종료
{{ itemCurrency }}{{ item.valid_price }}
{{ itemCurrency }}{{ priceFormat(item.valid_price / item.bundle_specification) }}/{{ item.unit }}
{{ itemDiscount }}
{{ itemCurrency }}{{ item.valid_price }} {{ itemCurrency }}{{ priceFormat(item.valid_price / item.bundle_specification) }}/{{ item.unit }} {{ itemCurrency }}{{ item.invalid_price }} {{itemDiscount}}
{{ itemCurrency }}{{ item.valid_price }}
후에 세일 종료
후 초특가세일 시작 후 초특가세일 종료
{{ getSeckillDesc(item.seckill_data) }}
{{ __( "Pay with Gift Card to get sale price: :itemCurrency:price", { 'itemCurrency' : itemCurrency, 'price' : (item.giftcard_price ? priceFormat(item.giftcard_price) : '0.00') } ) }} ({{ itemCurrency }}{{ priceFormat(item.giftcard_price / item.bundle_specification) }}/{{ item.unit }}) 상세정보
상품 유효 기간

판매 중단

이 상품이 언제 재입고될지는 알 수 없습니다.

현재 주소로 배송 불가
품절

제품 설명

제품 세부 정보 전체보기
Editer Recommend

全面覆盖从项目立项到网站上线的工作流程详细讲解响应式设计策略和技巧,为各式设备打造极优的用户体验充分利用渐进增强优化用户体验不仅面向Web开发人员,适合从事网站相关工作的各类人群阅读参考
Content Description

《学习响应式设计》分为四部分,全面介绍响应式Web设计策略与技术,引领大家掌握从项目立项到网站上线的响应式设计工作流程。首先介绍响应式设计及其与其他网页设计方法的区别。第二部分概述构建响应式站点的基础知识、需要掌握HTML和CSS知识、图像处理,以及响应式设计的核心:媒体查询。第三部分带大家全面了解响应式设计的工作流程,从用户体验的角度探讨响应式设计,确保网站在各种设备上的适应性和功能完备性。
Author Description

Clarissa Peterson,用户体验设计师、Web开发人员,响应式网站设计咨询公司Peterson/Kandy(位于蒙特利尔)联合创始人。她经常在开发者会议及研讨会上发表关于响应式设计、移动策略和用户体验方面的演讲。
Comments

★本书内容非常全面而又不失深度,对响应式Web设计的各种概念和理论给出了极棒的阐释!”——Tom Barker,美国康卡斯特公司软件工程与研发部总监

★“这本书的内容对初学者的知识体系是一个很好的补充,他们将通过本书学会创建更简洁、更具访问性和功能性的网站。Clarissa的讲解深入浅出,且不失时机地用大量示例阐明设计策略与技巧,其中的设计建议和极好实践对于专业开发人员具有很好的参考价值。”——读者评论

★“它不仅可以帮助Web设计师更新旧有思维方式和知识储备,说服客户更新甚或摒弃旧有网站重新设计,而且可以帮助不甚了解编码的项目经理理顺其在程序员、设计师与客户间的沟通……”——读者评论
Catalogue

第一部分响应式设计基础

第1章什么是响应式设计

1.1一点儿基础

1.2简史

1.3为什么是响应式设计

1.4总结

第2章响应式内容

2.1内容策略

2.2内容整理

2.3内容编写

2.4内容平等

2.5内容管理

2.6自适应内容

2.7总结

第二部分创建响应式网站

第3章响应式网站之HTML

3.1使用HTML

3.2页面基本结构

3.3视口

3.4结构性元素

3.5创建一个页面

3.6清晰和语义化的HTML

3.7总结

第4章响应式网站之CSS

4.1CSS 的工作方式

4.2CSS 版本

4.3置CSS 于何处

4.4层叠

4.5使用层叠

4.6注释

4.7组织你的样式表

4.8盒模型

4.9显示

4.10定位

4.11浮动和清除

4.12基本样式

4.13总结

第5章媒体查询

5.1何为媒体查询

5.2媒体查询结构

5.3在样式表链接中使用媒体查询

5.4使用媒体查询的其他方式

5.5我们可以查询什么

5.6浏览器支持

5.7断点

5.8设计范围

5.9响应式设计

5.10使用媒体查询

5.11两列布局

5.12设置最大宽度

5.13如何选择断点

5.14总结

第6章图像

6.1显示图像的方式

6.2替代文本

6.3图像文件格式

6.4优化图像

6.5内容图像

6.6背景图像

6.7响应式图像

6.8总结

第三部分玩转响应式设计

第7章响应式设计工作流程

7.1策略与规划

7.2内容先于布局

7.3考虑布局

7.4原型

7.5视觉设计

7.6响应式设计工具

7.7推销响应式设计

7.8与客户合作

7.9总结

第8章岂止手机

8.1用户体验

8.2设备无关的设计

8.3专注于移动优先

8.4尽你所能

8.5设备类型

8.6触摸

8.7屏幕尺寸

8.8可访问性(通用化设计)

8.9决定支持哪些设备

8.10为何要用真实设备进行测试

8.11测试

8.12总结

第四部分设计响应式网站

第9章文字排版

9.1始于HTML

9.2字型

9.3使用字体

9.4调整文字大小

9.5行长

9.6留白

9.7内边距和外边距

9.8为屏幕尺寸改变字型

9.9总结

第10章导航及页眉布局

10.1响应式导航

10.2网站品牌

10.3导航链接

10.4导航模式

10.5页眉

10.6总结

第11章性能

11.1性能的重要性

11.2性能作为设计元素

11.3网页加载与渲染方式

11.4性能测量

11.5清理代码

11.6将HTTP 请求减至最少

11.7服务器设置

11.8JavaScript

11.9CSS

11.10托管

11.11有条件地加载内容

11.12重绘与回流

11.13RESS

11.14总结


Book Abstract

2007 年,iPhone 的发布对于网站设计来说是一个转折点,网站设计师们突然失去了对画布(我们在上面设计网站)的控制。此前,网站只是在显示器屏幕上供人浏览,尽管屏幕尺寸有所不同,但差别并不是那么大。而现在,我们怎样才能使网站在iPhone 这么小的屏幕上供人浏览呢?

在开始的一段时间里,我们制作了专门针对iPhone 屏幕尺寸进行了优化的移动网站,其独立于我们的“常规”网站。同时维护两个站点还不是那么糟,但大量不同屏幕尺寸的手机很快涌现出来,然后是平板电脑以及更小号的平板电脑,我们终于意识到不可能为每种可能的屏幕尺寸都制作一个网站。

我们需要一种适用于所有屏幕尺寸的解决方案,需要一种设计网站的方法,使网站能够自动适配各种显示屏幕。

一时间各种创意层出不穷,不久之后响应式网站设计脱颖而出。它是一种灵活的不依赖于固定屏幕尺寸的网站设计方法,能够检测屏幕的大小并调整设计,从而针对具体设备提供最佳的视觉体验。2010 年,Ethan Marcotte 在A List Apart 上首次发表了关于响应式网站设计的文章(https://alistapart.com/article/responsive-web-design)。

如其他新技术一样,响应式网站设计一开始并不被人接受,许多人不断辩称——甚至于现在某些人还在这么做——我们需要为手机单独创建网站。但随着今天市场上设备的激增,很明显,我们不能依赖于一种手机模型并将其作为设计标杆。我们的设计要能够适应所有设备,而这些设备的屏幕尺寸各不相同。

而与此同时,响应式设计也在不断发展。它不再仅仅是适应屏幕尺寸,也能适应不同的设备性能,如触摸屏、视网膜显示屏,以及慢速连接。

在2014 年,58% 的美国成年人拥有一部功能丰富并允许用户完全访问网络的智能手机,这些手机搭载了iOS、Android、Windows Phone 等操作系统,1 且35% 的美国成年人拥有一部平板电脑。2 我们有令人惊叹的硬件设备,而响应式设计能帮助我们充分利用网络。

然而,尽管大多数美国成年人都有智能手机,但仍有32% 受访者的手机不是智能手机。这之中的很多人用手机访问网络时只能使用功能受限的浏览器,这种浏览器无法如他们希望的那样显示所有网站。响应式网站设计也是这种情况下的一种解决方案。

响应式网站设计一开始只是设计简单的、注重内容的站点(不依赖CSS 或JavaScript),使其能显示在几乎所有的联网设备上。在此基础之上,这种设计通过渐进式增强——响应式网站设计正是基于此——针对具体的显示屏尺寸以及设备功能进行优化。因而,功能手机(也即功能有限的旧式手机)只能获得那些它们能使用的内容,而相对来说较新的智能设备所访问的网站则具有丰富的设计、完美适配其屏幕的界面,设备功能被充分利用。

响应式网站设计使我们有能力为所有用户呈现最好的网站,而不管他们具体使用什么设备。网络对每个人应该都是可用的,而响应式设计将指导我们做到这一点。

创建响应式网站并不仅仅是学习几段新代码那么简单。它还包括重新审视网站构想方式,关注用户体验,并确保内容和功能不是在设计完成之后才加上去的。

我们还必须改变网站制作方式,过渡到一个涉及设计师、开发者和其他团队成员的更具协作性的过程中去。

我们需要学习一些新的代码,但响应式设计并不是一种新的编程语言,创建一个响应式网站只需要HTML、CSS,有时再加点JavaScript。如果你已经知道如何制作网站,那么本书中讲到的大部分内容对你来说都会很熟悉。你需要记住,在创建一个响应式网站时,90%的工作与创建非响应式网站时是一样的。但除了增加少许新技术,你需要掌握正确的基础知识,使用结构恰当、合乎规范的标记(HTML 和CSS)。如果没有坚实的基础,你难以确信自己的网站能正确工作并在各种设备上恰当地显示。

如果你从事与建设网站相关的工作,不管是一名Web 设计师、开发人员、内容策划、用户体验设计师、网站负责人、IT 主管,还是从事其他任何涉及创建和维护网站的工作,你都将从本书中知晓:响应式设计的工作原理、怎样调整自己的工作流程以适应响应式设计,以及如何创建对任何设备都能提供最佳设计与用户体验的响应式网站。

……

명세서

상표 Jingdong book
브랜드 영역 China

면책성명

제품 가격, 포장, 사양 등의 정보는 예고 없이 변경될 수 있습니다. 적시에 제품 정보를 업데이트 할 수 있도록 최선을 다하지만, 받은 실제 제품을 참고하시기 바랍니다. 제품을 사용하기 전에 반드시 제품에 동봉된 라벨, 경고 및 설명을 읽어 주십시오.

상세정보 보기
찜한 목록에 추가
{{ $isZh ? coupon.coupon_name_sub : coupon.coupon_ename_sub | formatCurrency }}
{{__("Buy Directly")}} {{ itemCurrency }}{{ item.directly_price }}
수량
{{ quantity }}
{{ instockMsg }}
{{ limitText }}
{{buttonTypePin == 3 ? __("Scan to view more PinGo") : __("Scan to start")}}
JD@CHINA 판매
배송지
{{ __("Ship to United States only") }}
69이상 주문 시 무료 배송
정품 보증

장바구니에 추가됨

쇼핑 계속하기

당신을 위한 추천

{{ item.brand_name }}

{{ item.item_name }}

{{ item.currency }}{{ item.market_price }}

{{ item.currency }}{{ item.unit_price }}

{{ item.currency }}{{ item.unit_price }}

쿠폰

{{ coupon.coupon_name_new | formatCurrency }}
받기 받았음 마감
{{ getCouponDescStr(coupon) }}
{{ coupon.use_time_desc }}
곧 만료됩니다: {{ formatTime(coupon.use_end_time) }}

친구들과 공유하세요

취소

Yami 기프트카드 전용특가

기프트카드로 결제하면 전용특가를 받을 수 있습니다

규칙 설명

기프트카드 전용특가는 일부 상품에 대한 특혜가격입니다.

기프트카드 전용특가 상품 구매 시 E-기프트 카드 잔액으로 결제하고 기프트카드 잔액이 주문 내 상품의 총액을 지불하기에 충분하하 기프트카드 전용특가가 자동으로 활성화됩니다.

기프트 카드 잔액으로 결제하지 않거나 기프트카드 잔액이 전항의 요건을 충족하지 못할 경우 기프트카드 전용특가를 활성화할 수 없으며 상품은 정상 가격으로 구매할 수 있습니다.

기프트카드 전용특가 상품 구매 시 잔액이 부족할 경우 장바구니 또는 결제 페이지에서 "충전" 버튼을 클릭하여 기프트카드를 구매 및 충전할 수 있습니다.

기프트카드 전용특가가 있는 상품은 "전용특가"라는 특별한 가격표시가 표시됩니다.

질문이 있으시면 언제든지 고객 서비스에 문의하십시오.

Yami는 기프트카드 전용특가 관련 최종 해석권을 보유합니다.

Yami 판매

서비스 보장

Yami $49 이상 무료 배송
Yami 걱정 없는 반품/교환
Yami 미국에서 발송

배송 정보

  • 미국

    표준 배송 $5.99(알래스카, 하와이 제외), 최종 가격 $49 이상 시 무료 배송

    지역 배송 $5.99(캘리포니아, 뉴욕, 뉴저지, 매사추세츠, 펜실베이니아, 위 주의 일부 지역), 최종 가격 $49 이상 시 무료 배송

    2일 이내 배송(알래스카 및 하와이 포함) $19.99부터 시작

반품 및 교환 정책

Yami는 고객님께 최상의 A/S를 제공하고, 모든 분들이 Yami에서 안심하고 쇼핑할 수 있도록 노력하고 있습니다. Yami의 자영 상품은 반품 및 교환 조건을 충족하는 경우, 상품 수령 후 30일 이내에 반품 및 교환할 수 있습니다(식품은 품질 문제로 인해 7일 이내에 반품 및 교환이 가능합니다. 모든 고객이 안전하고 고품질의 제품을 받을 수 있도록 뷰티 제품은 개봉 또는 사용 후에는 품질 문제를 제외하고 환불 또는 반품을 제공하지 않습니다. 기타 특별 카테고리의 제품은 고객 서비스에 문의하시기 바랍니다).
이해와 지원에 감사드립니다.

상세정보 보기

Yami 판매

Yami E-기프트카드 사용 약관

구매 시 자동 충전을 선택한 경우, 주문 완료 후 기프트카드가 자동으로 계정에 충전됩니다.

구매 시 이메일 발송을 선택한 경우, 주문 완료 후 시스템이 자동으로 카드 번호와 비밀번호를 입력한 이메일로 발송합니다.

이메일을 보낼 때, 모든 사용자는 이메일에 있는 카드 번호와 비밀번호를 사용하여 기프트카드를 충전할 수 있으니, 이메일 정보를 잘 보관하세요.

이메일을 받는 데 문제가 있으면, 고객 서비스에 연락하여 처리해 주세요.

이메일을 보낼 때, 기프트카드가 교환되지 않았다면 이메일을 재발송할 수 있습니다. 이미 다른 사용자에 의해 교환된 경우에는 보상할 수 없습니다.

Yamibuy의 E-기프트카드는 자영 또는 제3자 상품 구매에 사용할 수 있습니다.

Yamibuy의 E-기프트카드는 유효 기간 제한이 없으며, 장기간 유효합니다.

Yami 전자 상품권의 금액은 여러 번에 나눠서 사용할 수 있습니다;

Yami 전자 상품권 업무 규칙의 최종 해석 권한은 Yami 웹사이트에 있습니다.

반품 및 교환 정책

이미 사용된 E-기프트카드는 환불이 불가능합니다.

판매자: JD@CHINA

서비스 보장

Yami $49 이상 무료 배송
Yami 최고의 A/S
Yami 미국 본토에서 발송

배송 정보

  • 미국

    표준 배송 $5.99(알래스카, 하와이 제외), 최종 가격 $49 이상 시 무료 배송

    지역 배송 $5.99(캘리포니아, 뉴욕, 뉴저지, 매사추세츠, 펜실베이니아, 위 주의 일부 지역), 최종 가격 $49 이상 시 무료 배송

    2일 이내 배송(알래스카 및 하와이 포함) $19.99부터 시작

반품 및 교환 정책

제품을 받으신 후 30일 이내에 제품을 반품하실 수 있습니다. 반품된 품목은 구매에 대한 원본 송장을 포함하여 원래 포장된 새 품목이어야 합니다. 고객이 자신의 비용으로 제품을 반품합니다.

JD@CHINA 판매

서비스 보장

Yami 점포간 $:amount 이상 구매 시 무료 배송
Yami 30일 반품/교환 보장

Yami-중국 집하창고

Yami는 중국 내 주요 우수매장에서 제품을 선별하여 모아 Yami 중국통합센터로 배송하며 택배를 합친 후 전국 각지의 주소로 배송해 드립니다. 점포간 무료 배송 조건은 최저 $69입니다. 여러 판매자가 제공하는 다양한 상품 중에서 원하는 상품을 선택하고 점포간 무료배송으로 저렴한 배송비를 쉽게 누릴 수 있습니다.

반품 정책

30일 이내 반품 및 교환 보증을 제공합니다. 제품은 새로 사용하지 않은 원래 포장에 구매 증명서가 첨부되어 있어야 합니다. 상품 품질 문제, 잘못된 배송, 배송 누락 등 판매자의 실수로 인한 경우 환불 처리됩니다. 기타 사유로 인한 반품 및 교환은 배송비는 고객이 자체로 부담하셔야 합니다. 모든 제품은 장거리 배송을 하기 때문에 간혹 간단한 외부 포장이 눌려 마모되는 등이 있지만 내부 품질 문제가 없는 경우 반품 및 교환할 수 없습니다.

배송 정보

Yami 중국집하배송 Consolidated Shipping 배송비 $9.99 ($69 이상 주문시 무료배송)

중국 판매자는 주문 후 영업일 기준 2일 후에 상품을 발송합니다. 모든 택배는 Yami 중국통합센터(특별한 상황 및 중국 내 개별 법정 공휴일 제외)에 도착하여 택배를 합친 후 UPS를 통해 미국으로 배송됩니다. UPS는 중국에서 발송 후 미국까지 평균 10영업일 정도 소요되며 직배송 주문 번호에 따라 수시로 추적 및 조회할 수 있습니다 전염병의 영향으로 현재 물류가 5일 정도 지연될 수 있습니다. 택배는 고객 서명이 필요합니다. 서명하지 않은 경우 고객은 택배가 분실될 위험을 부담하게 됩니다.

JD@CHINA 판매

서비스 보장

69이상 주문 시 무료 배송
정품 보증

배송 정보

Yami Consolidated Shipping배송비$9.99($69 이상 주문 시 무료 배송)


Seller will ship the orders within 1-2 business days. The logistics time limit is expected to be 7-15 working days. In case of customs clearance, the delivery time will be extended by 3-7 days. The final receipt date is subject to the information of the postal company.

포인트 규칙

모든 품목은 Yamibuy 의 프로모션이나 포인트 이벤트에서 제외됩니다.

반품 및 교환 정책

제품을 받으신 후 30일 이내에 제품을 반품하실 수 있습니다. 반품된 품목은 구매에 대한 원본 송장을 포함하여 원래 포장된 새 품목이어야 합니다. 고객이 자신의 비용으로 제품을 반품합니다.

Yami

Yami 앱 다운로드

맨 위로 돌아가기

당신을 위한 추천

브랜드 스토리

Jingdong book

为您推荐

Yami
欣葉
2种选择
欣叶 御大福 芋头麻薯 180g

周销量 600+

$1.66 $1.99 83折
Yami
欣葉
2种选择
欣叶 御大福 芋头麻薯 180g

周销量 600+

$1.66 $1.99 83折
Yami
欣葉
2种选择
欣叶 御大福 芋头麻薯 180g

周销量 600+

$1.66 $1.99 83折
Yami
欣葉
2种选择
欣叶 御大福 芋头麻薯 180g

周销量 600+

$1.66 $1.99 83折
Yami
欣葉
2种选择
欣叶 御大福 芋头麻薯 180g

周销量 600+

$1.66 $1.99 83折
Yami
欣葉
2种选择
欣叶 御大福 芋头麻薯 180g

周销量 600+

$1.66 $1.99 83折

리뷰{{'('+ commentList.posts_count + ')'}}

당신의 체험을 공유하고 더 많은 사용자가 선택할 수 있도록 도와줍니다.

리뷰 작성
{{ totalRating }} 리뷰 작성
  • {{i}}별

    {{i}} 별

    {{ parseInt(commentRatingList[i]) }}%

Yami Yami
{{ comment.user_name }}

{{ showTranslate(comment) }}접기

{{ strLimit(comment,800) }}전체 보기

Show Original

{{ comment.content }}

Yami
모두 보기

{{ formatTime(comment.in_dtm) }} 구매 완료 {{groupData}}

{{ comment.likes_count }} {{ comment.likes_count }} {{ comment.reply_count }} {{comment.in_user==uid ? __('Delete') : __('Report')}}
Yami Yami
{{ comment.user_name }}

{{ showTranslate(comment) }}접기

{{ strLimit(comment,800) }}전체 보기

Show Original

{{ comment.content }}

Yami
모두 보기

{{ formatTime(comment.in_dtm) }} 구매 완료 {{groupData}}

{{ comment.likes_count }} {{ comment.likes_count }} {{ comment.reply_count }} {{comment.in_user==uid ? __('Delete') : __('Report')}}

조건에 맞는 리뷰가 없습니다

리뷰 상세

Yami Yami

{{ showTranslate(commentDetails) }}접기

{{ strLimit(commentDetails,800) }}전체 보기

Show Original

{{ commentDetails.content }}

Yami
모두 보기

{{ formatTime(commentDetails.in_dtm) }} 구매 완료 {{groupData}}

{{ commentDetails.likes_count }} {{ commentDetails.likes_count }} {{ commentDetails.reply_count }} {{commentDetails.in_user==uid ? __('Delete') : __('Report')}}

내용을 입력하세요

답변{{'(' + replyList.length + ')'}}

Yami Yami

{{ showTranslate(reply) }}접기

{{ strLimit(reply,800) }}전체 보기

Show Original

{{ reply.reply_content }}

{{ formatTime(reply.reply_in_dtm) }}

{{ reply.reply_likes_count }} {{ reply.reply_likes_count }} {{ reply.reply_reply_count }} {{reply.reply_in_user==uid ? __('Delete') : __('Report')}}

내용을 입력하세요

취소

지금까지의 모든 리뷰입니다!

리뷰 작성하기
상품 평점

댓글을 입력하세요.

  • 좋은 닉네임이 당신의 리뷰를 더 인기 있게 만들 것입니다!
  • 여기에서 닉네임을 변경하면 개인정보의 닉네임도 같이 변경됩니다.
리뷰를 남겨주셔서 감사합니다
당신의 좋은 리뷰는 우리 커뮤니티가 아시아 최고의 상품을 찾는 데 도움이 됩니다.

신고하기

취소

이 리뷰를 삭제하시겠습니까?

취소

최근 본 상품

브랜드 스토리

Jingdong book