第10章 移动端布局和响应式开发-【千锋教育】HTML5+CSS3+JavaScript 网页设计基础与实战（微课版）

第10章 移动端布局和响应式开发 10.1 移动端布局 10.2 rem布局 10.3 响应式开发 了解流式布局和媒体查询 了解Bootstrap框架 掌握Flex布局和rem布局 学 习 目 标 LEARNING OBJECTIVES 初心至善 匠心育人 引言 随着手机的广泛使用，移动互联网成为当下热门的话题，而移动端开发也成为重要的发展方向。移动端布局和PC（电脑）端布局有很多不同之处。移动端设备的尺寸不一，需要对设备进行适配处理。移动端的横屏竖屏切换，需要有针对性的响应式布局。移动端布局有流式布局、Flex布局、rem布局等，不同的网页可以使用不同的布局方式来呈现。而响应式开发能够使页面内容可以在不同的设备上有适应性地展现出来，让用户更方便地在不同设备上浏览网页。 初心至善 匠心育人 10.1 移动端布局 视口 案例—图书活动Flex布局 Flex布局 流式布局 目录 Contents 初心至善 匠心育人 10.1 移动端布局 视口(viewport)是浏览器显示页面内容的屏幕区域。视口可以分为布局视口（layout viewport）、视觉视口（visual viewport）和理想视口（ideal viewport）。 布局视口是指网页的固定宽度，是早期为了解决PC端页面在手机上的显示问题，根据不同的设备而设置的默认宽度。视觉视口是屏幕的可视部分，不包括屏幕键盘，缩放外的区域，视觉视口比布局视口相同或者更小。理想视口是指对设备而言最理想的视口尺寸，能够使网页在移动端浏览器上获得最理想的浏览和阅读的宽度。 10.1.1 视口 概述 初心至善 匠心育人 10.1 移动端布局 通过<meta>视口标签可以在不同的设备上设置视口，<meta>视口标签的语法格式如下所示。 10.1.1 视口 使用视口 <meta name="viewport" content="视口的属性"> <meta name=viewport content="width=device-width,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,minimal-ui"> 完整视口的写法如下所示。 初心至善 匠心育人 10.1 移动端布局 在上述完整视口的写法中，width属性为视口的宽度，“width=device-width”表示视口宽度为当前设备的宽度。user-scalable属性表示用户是否缩放，属性值为yes或no（1或0）。initial-scale属性为初始缩放比，属性值为大于0的数字。minimum-scale属性为最小缩放比，属性值为大于0的数字。maximum-scale属性为最大缩放比，属性值为大于0的数字。minimal-ui属性是<meta>标签新增的属性，可以使网页在加载时便可隐藏顶部的地址栏与底部的导航栏。 10.1.1 视口 使用视口 初心至善 匠心育人 10.1 移动端布局 移动端的显示页面与PC端的显示页面是有所区别的，因此需要为全局页面设置特殊的样式，移动端特殊样式如下所示。 10.1.1 视口 移动端基础交互 *{ -webkit-tap-highlight-color: transparent; /* 清除点击屏幕时的高亮显示 */ } html, body { -webkit-user-select: none; /* 禁止选中文本 */ } a, img { -webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单 */ } input{ -webkit-appearance: none; /*取消文本框或按钮的默认外观样式，以便自定义外观*/ } 初心至善 匠心育人 10.1 移动端布局 流式布局也叫百分比布局，是一种等比例缩放的布局方式，是移动端开发中经常使用的布局方式之一。流式布局是对页面以百分比方式划分区域进行排版，可以在不同分辨率下显示相同的版式，将盒子的宽度设置成百分比，搭配min-*和max-*属性使用。流式布局的实现方法是将CSS固定像素宽度换算为百分比宽度，换算公式为“目标元素宽度/父盒子宽度=百分数宽度”。 10.1.2 流式布局 概述 初心至善 匠心育人 10.1 移动端布局 流式布局的特点有以下3个方面。 10.1.2 流式布局 概述 盒子宽度自适应，使用百分比来定义，但高度使用固定px像素值定义。 盒子内的图标、字体大小等都是固定的，不是所有内容都是自适应。 在CSS样式中，需要使用min-*和max-*属性来设置盒子在设备中的最小宽度和最大宽度，防止任意拉伸页面带来的异常问题的发生。 初心至善