首页 > 代码库 > 移动端开发基础

移动端开发基础

2024-08-06 18:02:45   220人阅读

1. viewport

属性说明
width使用与设备无关的像素表示所需的视区宽度。 它可以是明确的数字（如 240）或最好是相对值，如 device-width。
height使用与设备无关的像素表示所需的视区高度。 它可以是明确的数字（如 320）或最好是相对值，如 device-height。
initial-scale

表示首次加载页面时所需的缩放级别。 值 1 表示应使用自然大小呈现页面，根本不进行缩放。值 2 将页面大小加倍，

依此类推。 您也可以使用十进制值，例如“1.0”。

minimum-scale表示页面允许的最低缩放级别。 值 1 表示用户不能将页面缩小到低于自然大小。
maximum-scale表示页面允许的最大缩放级别。 最大值为 10.0。
user-scalableyes/no 属性，用于表示是否允许用户缩放页面。

常见用法：

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

 2. 媒体类型（media type）

常见用法：

<!--方法一 --><link href="style.css" media="screen"><!--方法二 -->@media screen{    selector{rules}}

另外，媒体类型支持not、only关键词

@media only screen{      selector{rules}  }

3. 媒体查询（media query）

语法结构：

1. @media 媒体类型 and (css属性:值)

@media screen and (max-width:240px){    body{font-size:medium;}}

2. @media 媒体类型 and (css属性:值), 媒体类型 and (css属性:值)

@media handheld and (min-width:360px),screen and (min-width:480px){    body{font-size:large;}}

 4. 横竖屏(landscape/portrait)

/*竖屏*/@media screen and (orientation:portrait) {    selector{rules}}/*横屏*/@media screen and (orientation:landscape) {    selector{rules}}

 

移动端开发基础


联系
我们