移动端app开发

最新推荐文章于 2024-05-20 10:24:40 发布

entropy is true

最新推荐文章于 2024-05-20 10:24:40 发布

阅读量372

点赞数 9

文章标签： java 前端服务器

本文链接：https://blog.csdn.net/2301_80148143/article/details/135900141

版权

<meta>的使用

对meta元素进行设置指的是通过标签属性进行设置。
<meta> 元素表示那些不能由其它HTML元相关元素表示的任何元数据信息 (meta-information) ，比如页面是否允许用户缩放、比如针对搜索引擎和更新频度的描述和关键词等。

<!-- 声明文档使用的字符编码 -->
<meta charset="utf-8">
<!-- http-equiv相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助浏览器正确地显示网页内容 -->
<!-- 与http-equiv对应的属性值为content，这里IE=edge告诉IE使用最新的引擎渲染网页 -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!-- name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的 -->
<meta name="title" content="优酷-中国领先视频网站,提供视频播放,视频发布,视频搜索 - 优酷视频" />
<meta name="keywords" content="视频,视频分享,视频搜索,视频播放,优酷视频" />
<meta name="description" content="视频服务平台,提供视频播放,视频发布,视频搜索,视频分享" />

charset的属性：

utf-8:HTML5的默认字符集为UTF-8，UTF-8几乎覆盖了所有的字符和符号。

在开发移动端页面时，我们需要设置meta标签：

<!-- 设置移动端视图 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

上面的设置表示: H5页面窗口自动调整到设备宽度，并禁止用户缩放页面

viewport的属性：

width:viewport的宽度

height:viewport的宽度（使用较少）

initial-scale:初始的缩放比例

minimun-scale:允许用户缩放到的最小比例

maximum-scale: 允许用户缩放到的最大比例。

user-scalable: 用户是否可以手动缩放。

rem 和em

根元素<html></html>

rem 是相对于根元素的字体大小转换的。

em 则是根据父元素的字体大小转换的。

新的单位vw/vh

1vw = 1/100视口宽度

1vh = 1//100视口高度

视口（viewport）文档的可见部分

模态框

模态框：通常指页面中弹出的窗口。

1.设置模态框蒙层的大小为视口大小：

// 将蒙层的宽高设置为视口的宽度和高度
width: 100vw;
height: 100vh;

2.将模态框蒙层用position:fixed定位到浏览器的左上角：

// 用定位把蒙层定位到浏览器的左上角
position: fixed;
top: 0;
left: 0;

尺寸的处理

一般宽度为750px.

Sas自定义函数

@function psd2px($px) {

@return #{$px/2}px;

}

可以使用这个自定义函数统一处理设计稿的尺寸，

@function psd2px($px) {
  @return #{$px / 2}px;
}

.header {
  // 假设设计稿上高度是100px，那么函数参数就写100，计算后返回的值就是 50px
  height: psd2px(100);
}

移动端的响应式布局尺寸的处理

将传入的px值转换为rem单位的值。

1.设置根元素的字体大小

2.重写自定义函数

html {
  font-size: 20px;
}

@function psd2px($px) {
  @return #{$px / 40}rem;
}

3.用媒体查询写响应式布局

移动端固定头部

可以横向滚动的导航和右侧的按钮组成，

故用绝对定位将按纽定位到滚动导航的右边。

横向滚动的实现可以通过 overflow:scoll属性来实现，但是单纯的只用这一个属性不够顺滑，所以我们添加-webkit-overflow-scrolling:touch,这个属性来解决滚动卡顿的问题。