《高性能响应式Web开发实战》一第2章 响应式中要面对的问题

第2章 响应式中要面对的问题

高性能响应式Web开发实战
响应式设计的主要工作就是要让网页适配当下种类繁多的设备,使页面在不同设备上仍然看上去友好并且可用。但是细想,当在设法让一个页面同时适配三星Galaxy S6和iPhone 6时,我们究竟是在适配什么?Galaxy S6和iPhone 6究竟存在哪些影响页面展现的差异因素?以上这些问题都可以归纳为:当谈论设备的时候我们究竟在谈论什么?

不同设备间的差异有很多种,我们不关心设备的制造厂商,不关心CPU功耗,不关心生产工艺,只关心会影响页面在屏幕上展现的设备因素。如果用户在来自两台不同厂商设备上浏览页面时的效果是一致的,那么从前端的角度讲,就可以认为在某种意义上这两台设备并无差异。本章将会让读者了解到,在响应式设计中,有哪些常用的差异性因素是需要考虑的,在本书的后面的章节中,主要也是围绕这些因素做适配与兼容。

时间: 2024-12-03 15:44:20

《高性能响应式Web开发实战》一第2章 响应式中要面对的问题的相关文章

《高性能响应式Web开发实战》一导读

前 言 高性能响应式Web开发实战 为什么写这样一本书 作为一名程序员,写书也好,写博客也罢,其实都和写开源程序的性质是一样的,都是想要把自己的知识分享出去.分享是一件非常有成就感同时也是很快乐的事情,因为我们在此过程中会有很多新的想法,会迫不及待地想去实现,也会有很多人来和我们进行交流,探讨其他的一些可能性.最重要的是,对于做分享的人而言,做好分享很难!首先,分享者要对自己讲解的技术有足够的了解,不仅仅是了解如何用它,还要了解它的过去和未来:其次,分享者要能够娓娓道来,要站在受众的立场上考虑他

《高性能响应式Web开发实战》一第1章 概述及任务介绍

第1章 概述及任务介绍 高性能响应式Web开发实战本章向读者大致描述整本书的轮廓.希望通过阅读本章内容,读者能够了解这本书涉及的技术范围.写作风格.写作思路以及贯穿全文的线索.我相信这对读者阅读接下来的内容会很有帮助,不至于让读者觉得某些章节的安排比较突兀. 当然,读者也可以跳过本章内容,直接进入下一章,开始实战技术的学习.

《HTML5移动Web开发实战》—— 第1章 HTML5与移动网站

第1章 HTML5与移动网站 HTML5移动Web开发实战 本章内容包括: 准备好你的移动设备 仿真器与模拟器 搭建移动开发环境 在移动网站中使用HTML5 跨浏览器兼容HTML5 适用于移动设备的设计 确定你的核心移动设备 定义一个内容策略

《高性能响应式Web开发实战》一1.4 定义响应式

1.4 定义响应式 我们有没有可能采用一种最直接的方式,用一句话阐述响应式在前端开发中究竟代指哪些技术?如果非要往前追溯对响应式技术的定义,一定要谈alistapart[3] 网站上的被奉为经典的两篇文章,即<Responsive Web Design>[4]和<A Dao of Web Design>[5] . 在<Responsive Web Design>中,作者仅仅使用了流式布局(fluid layout)和媒体查询(media query)就完成了响应式页面的

《高性能响应式Web开发实战》一2.2 CSS像素

2.2 CSS像素 上一节讲的像素密度和Web开发有什么关系?在我们编写样式代码时,常会用到另一个像素单位px.为了和设备像素区分开,我们把它称为CSS像素.如果说设备像素给我们的印象是机械的.固定的.物理的,那么CSS像素将会是灵活的.虚拟的.相对的. 为什么说它是相对的? 假设我在页面上画一个300 px宽度的块级元素.一般情况下,块级元素只相当于页面的部分宽度.如果使用浏览器的页面放大功能,10倍地放大页面,很快块级元素就会充满整个页面.但吊诡的是,此时我们既没有改变浏览器的宽度,也没有改

《高性能响应式Web开发实战》一1.5 本书任务

1.5 本书任务 图1-5与图1-6给出的是本书中要完成的页面设计稿. 这是一位产品经理为本书而设计的.2015年年初sitepoint [6] 网站发布了一篇有关2015年网页设计趋势的文章<The Big Web Design Trends for 2015> [7] .文章中归纳了在2015年网页设计中将会出现的趋势性特征,如大气(make it big).简约(minimize).扁平设计(flat design),在这次设计稿中都得以体现. 图1-5所示为页面桌面端样式,图1-6所示

《高性能响应式Web开发实战》一2.4小结

2.4小结 本章的开头首先了解了关于屏幕PPI的定义,并引出了设备像素这个概念.虽然像素密度越高,能够表现的图像越细腻.但是,这一特性也需要开发者提供更高清的素材来支持,否则素材会显得模糊不堪. 随后提出了CSS像素的这个概念,并且梳理了CSS像素与设备像素之间的异同.通过CSS像素,能部分解决PPI在Web开发中的缺陷. 最后我们介绍了桌面端浏览器与移动设备浏览器在渲染页面时的差异,由此引出了视口(viewport)的概念,并学习了在移动浏览器上如何手动控制视口. 本书接下来的几章内容都与这些

《移动优先与响应式Web设计》一第1章 响应式网页

第1章 响应式网页 移动优先与响应式Web设计 "有一样东西,它大概是不喜欢墙--" --罗伯特·弗洛斯特<修墙> 在开始写这本书时,我就能意识到无法确保你会拿着这本小小的书,阅读印刷版.你或许会在台式计算机屏幕阅读电子版:或许会在坐车上班时,在手机上翻页:或在平板电脑上滑动页面:或许根本不会阅读这段文字,而是由计算机为你朗读此书. 总之,我并不了解你,不知道你如何阅读这本书,根本没可能知道. 出版业终于承袭了网页的一大特色--灵活性.图书设计师和出版人克雷格·莫特认为出版

《HTML5移动Web开发实战》—— 第1章 移动Web设计趋势

第1章 移动Web设计趋势 众妙之门--移动Web设计精髓Steven Snell Web设计师都深知这个行业包含了大量的变化和创新,为了始终保持在业内的领先地位,需要不断地适应和学习新的技术.在过去的几年中,该行业中变化最大的领域之一就是越来越多的网民通过手机和移动终端设备来进行网络浏览.因此,Web设计师必须不断学习和掌握更多.更新的专业知识,从而开发出更多.更好的移动网络应用以满足这一受众群体的需求. 因为设计应用于移动设备的网页存在一些特有的问题和挑战,所以这需要设计者和开发者用具有战略