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

项目四响应式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=viewportcontent=width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0在HTML5中可以使