第14章 移动端布局与响应式开发-【好程序员成长】HTML5从入门到精通

移动端布局 弹性盒模型 响应式开发 本章小结 第14章 移动端布局与响应式开发 移动端布局 弹性盒模型 响应式开发 目 录 CATALOUGUE 01 02 03 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 掌握移动端开发 了解移动端与手机基本概念 理解弹性盒模型和响应式开发 熟悉移动端布局 学 习 目 标 LEARNING OBJECTIVES 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 14.1 移动端布局 14.1.1 移动端模拟器 14.1.2 手机基本概念 14.1.3 viewport 14.1.4 移动端布局方案 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 移动端布局需要可以模拟不同的手机设备的移动端开发环境。Chrome浏览器自带移动端模拟器，通过F12键开启调试控制台，找到手机图标，单击后即可从PC浏览器切换到移动端模拟器。打开任意网站，刷新浏览器，可显示此网站移动端展示效果。 移动端模拟器可进行不同设备的选择，还包括横竖屏切换，模拟网络延迟等功能。选择不同设备和横屏显示如图所示。 14.1 移动端布局 14.1.1 移动端模拟器 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 了解手机基本概念对移动端开发的理解有很大帮助，下面用iPhone5手机作为示例进行讲解屏幕分辨率、物理像素与CSS像素、PPI、DPR等名词。 1.屏幕分辨率 iPhone5的屏幕分辨率为1136 × 640，指手机的竖排有1136个像素，横排有640个像素。即屏幕像素为72.7万，注意72.7万是指手机屏幕的像素值，不是手机拍照的像素值，一般手机拍照的像素值会很高，如iPhone5手机拍照像素值为800万像素。 并不是屏幕的分辨率越高屏幕就越大，屏幕的大小由屏幕的尺寸决定，屏幕的尺寸指屏幕对角线的长度，一般单位为英尺，如iPhone5屏幕尺寸为4英尺。常用手机屏幕尺寸大小如图所示。 14.1 移动端布局 14.1.2 手机的基本概念 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 2.物理像素与CSS像素 上面提到的iPhone5的屏幕分辨率为1136 × 640，指的是物理像素。物理像素的单位为dp（点），属于设备无关像素值，设备能控制显示的最小单位，可以把这些像素看作成显示器上一个个的点。 CSS像素也叫逻辑像素是浏览器使用的抽象单位，iPhone5的CSS像素为568 × 320。CSS像素的单位为px，是指通常做网页时用到的CSS像素。在PC设备上1个物理像素等于1个CSS像素，但在移动端iphone5上4个物理像素等于1个CSS像素。 屏幕分辨率指物理像素，而实际屏幕大小对应的是CSS像素。物理像素进行压缩处理，使4个物理像素对应1个CSS像素，目的是为了显示高清的效果，这种技术叫做Retina高清视网膜屏。 14.1 移动端布局 14.1.2 手机的基本概念 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 3.PPI PPI 全称是pixel per inch，即每英寸内有多少个像素点，其像素点指的是物理像素，可表示像素密度。PPI的值越高，画质越好，即越细腻，通过以下公式换算，如图所示。iPhone5下的PPI为326。 PPI值越高说明屏幕越清晰，一般PPI值大于320的设备，都可以看作是Retina高清视网膜屏。 14.1 移动端布局 14.1.2 手机的基本概念 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 4.DPR DPR全称是devicePixelRatio，中文叫作“设备像素比”。DPR值是物理像素与CSS像素的比值，可以是横排像素比，也可以是竖排像素比，在iPhone5下无论横排还是竖排，DRP值都为2。DPR可通过JavaScript语法window.devicePixelRatio语法来获取，DPR值对于布局是有帮助的，可以通过DPR值进行换算处理。 14.1 移动端布局 14.1.2 手机的基本概念 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 移动端布局中会涉及到一个viewport的概念。在移动端viewport有两个，visual viewport即视口viewport和layout viewport即布局viewport。 视口viewport在布局viewport上方，且视口viewport大小固定不变。而布局viewport大小可随时改变，在iphone下默认的布局viewport为980px。 视口viewport的固定大小，导致布局viewport值越大viewpor