Web前端开发技术项目教程课件 项目四 响应式Web页面移动端设计

项目四响应式Web页面移动端设计WEB前端开发技术项目教程目录1了解视口网页移动端设计32媒体查询CONTENTS了解视口1视口（Viewport）是用户在网页上的可见区域，视口的大小是随着设备的不同而变化的，通常在手机上比在电脑上的要小。1了解视口设置视口，示例代码如下：代码说明：width=device-width：width用来设置视口的宽度，width的值可以设置为device-width也可以设置为正整数。user-scalable=no：user-scalable用来设置是否允许用户手动缩放页面，当值为no时表示不允许用户缩放页面；当值为yes时表示允许用户缩放页面。initial-scale=1.0：initial-scale用来设置初始缩放比例，取值范围为[0.0，10.0]。maximum-scale=1.0：maximum-scale用来设置最大缩放比例，取值范围为[0.0，10.0]。minimum-scale=1.0：minimum-scale用来设置最小缩放比例，取值范围为[0.0，10.0]。<metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">在HTML5中可以使用<meta>标签来设置视口。媒体查询22.1认识媒体查询

媒体查询可以根据媒体类型和检查媒体特性的条件表达式来应用不同的CSS样式。2.2媒体查询的相关知识1.媒体类型值描述all默认值，用于所有媒体类型设备print用于打印机screen用于计算机屏幕、平板电脑、智能手机等speech用于屏幕阅读器等发声设备2.2媒体查询的相关知识2.常用的媒体特性值描述aspect-ratio定义‘width’与‘height’的比例width输出设备中的显示区域的宽度height输出设备中的显示区域的高度resolution输出设备的分辨率orientation设备屏幕的方向：横屏或是竖屏max-width输出设备中的显示区域的最大宽度max-height输出设备中的显示区域的最大高度min-width输出设备中的显示区域的最小宽度min-height输出设备中的显示区域的最小高度2.2媒体查询的相关知识3.媒体查询的使用方法<style>@mediascreenand(max-width:992px){body{background-color:green;}}</style>（1）直接在CSS样式文件中使用，示例代码如下：2.2媒体查询的相关知识3.媒体查询的使用方法<linkrel="stylesheet"media="screenand(max-width:992px)"href="aa.css"/>（2）<link>标签中使用，示例代码如下：@importurl("aa.css")screenand(max-width:992px);（3）在CSS中使用@import规则编写，示例代码如下：网页移动端设计33网页移动端设计【任务目标】

日常生活中我们进行上网的设备很多，有手机、平板电脑、笔记本电脑/台式机等。通过媒体查询的方式实现一套代码就能自适应在不同设备上显示，使得用户的体验更好。【任务分析】不同的设备，显示区域的宽度不同，超小型设备（电话）的显示区域宽度在600px及以下，小型设备（纵向平板电脑和大型手机）的显示区域宽度在600px及以上，中型设备（横向平板电脑）的显示区域的宽度在768px及以上，大型设备（笔记本电脑/台式机）的显示区域宽度在992px及以上，超大型设备（大型笔