HTML5移动Web开发项目化实战教程 项目4 习题答案

1.视口定义+移动端设置viewport的原因答：视口是浏览器显示网页内容的区域；移动端默认视口是980px（PC尺寸），会导致页面缩放/布局错乱，设置<metaname="viewport">可适配移动端屏幕。例子：移动端不设视口，网页会整体缩小，文字/按钮显示过小。2.标准移动端视口meta标签+属性解释答：标签：<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">属性作用：width=device-width：视口宽度等于设备屏幕宽度；initial-scale=1.0：初始缩放比例1:1；maximum-scale=1.0：最大缩放比例1；user-scalable=no：禁止用户手动缩放。3.流式布局定义+适配方式答：流式布局（流体布局）用百分比/自适应单位设置元素宽度，随屏幕尺寸自动伸缩，固定核心高度，适配不同屏幕。例子：width:80%;（元素宽度占父容器80%，屏幕变窄则宽度同步缩小）。4.CSS实现两栏流式布局（左固定、右自适应）答：例子：css/*父容器*/.container{width:100%;overflow:hidden;/*清除浮动*/}/*左侧固定宽度*/.left{float:left;width:100px;/*固定宽度*/height:300px;background:#ccc;}/*右侧自适应*/.right{margin-left:100px;/*避开左侧*/height:300px;background:#eee;}5.弹性布局作用+3个容器属性答：作用：Flex布局（弹性布局）通过设置容器和项目的弹性规则，快速实现元素的自适应排列、对齐，适配不同屏幕。常用Container属性：display:flex;（开启弹性布局）；justify-content:center;（主轴对齐方式）；align-items:center;（交叉轴对齐方式）。6.Flex实现元素水平+垂直居中答：例子：css/*父容器*/.box{width:300px;height:300px;border:1pxsolid#000;display:flex;/*开启Flex*/justify-content:center;/*水平居中*/align-items:center;/*垂直居中*/}/*子元素*/.child{width:100px;height:100px;background:#f00;}7.rem计算依据+与em区别+移动端适配方案答：rem：基于根元素（html）的font-size计算（如html字体16px，则1rem=16px）。与em区别：em基于父元素字体大小，rem基于根元素，避免嵌套层级影响。适配方案（750px设计稿）：css/*步骤1：设置根元素字体（750px设计稿，1rem=100px，方便计算）*/html{font-size:calc(100vw/7.5);/*750px/7.5=100px，屏幕宽度自适应*/}/*步骤2：使用rem布局（设计稿中300px宽的元素，写3rem