H5学习的第三周
上周,我们结束了京东站的制作,本周我们开始了手机站和响应式网站的学习,并仿制了一个手机端界面和一个响应式界面,在完成这两个网站的过程中我遇到了许多问题,也了解了它们的解决方法,接下来我讲详细介绍本周我们的学习内容。
周一,我们了解了像素之间的关系,具体为:
1.设备物理像素:设备上的一个像素点。
2.设备无关像素:可以与物理像素通过dpr转换。(dpr为1时无关像素=物理像素。)
3.css像素:css中使用的的抽象概念,页面没有缩放时,css像素=无关像素。
和视口viewport 的概念:
设置布局viewport的各种信息
width=device-width:宽度等于设备默认宽度,
initial-scale=1.0默认缩放比为1(让css像素=设备无关像素),
maximum-scale=1:最大缩放比为1,
minimum-scale=1:最小缩放比为一,
user-scalable=no:用户禁止缩放(ios10中的sarifi浏览器失效)。
具体写法:<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=: no"/>
之后,我们又了解了手机端用到的一些新的meta标签:
禁止设备将疑似手机号/邮箱,进行识别。取消点击拨打电话等事件
<meta name="format-detection"content="telephone=no,email=no"/>
iOS 添加到主屏幕时,WebAPP的标题
<meta name="apple-mobile-web-app-title" content="我的第一个WebAPP">
iOS 添加到主屏幕时,WebAPP的icon图标
<link rel="apple-touch-icon-precomposed" href="http://st.360buyimg.com/m/images/apple-touch-icon.png?v=jd201703162005" />
iOS 添加到主屏幕时,启用WebAPP全屏模式,删除顶端地址栏和底部工具栏
<meta name="apple-mobile-web-app-capable" content="yes" />
iOS 添加到主屏幕时,WebAPP顶部状态的样式
可选值:
black:黑色
default:默认白色
black-translucent(半透明):网页内容充满整个屏幕,顶部状态栏会遮挡网页头部。
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
设置浏览器,时候最新的IE和chrome去编译
>>> 不是手机端专用,PC网页一般也需要设置
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
其他几个meta标签,了解即可
① 设置浏览器过期时间,-1表示时刻过期,及每次刷新都要请求最新数据
② 是否设置浏览器缓存,否
③ 是否从本机读取缓存文件,否
<meta http-equiv="Expires" content="-1">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
手机端样式选择:
1.手机端一般不支持微软雅黑,中文字体无需选择,使用手机默认即可,;
2.英文字体一般选择
font-family: helvetica;
-webkit-user-select: none;
-moz-user-select: none;
禁止选中文本(如无文本选中需求此项必填)。
1.手机禁止长按选中,
2.电脑禁止鼠标选中。
-webkit-appearance: none;
去除表单默认外观
手机电脑均可使用。
input::-webkit-input-placeholder {
color: #999;
}
帮助:文档伪类对象选择符可查
禁止长按图片与链接弹出菜单
a img{
-webkit-touch-callout: none;
}
打电话/发短信/发邮件
<a href="tel:0535-10086">
打电话给:0535-10086
</a>
<a href="sms:10086">发短信给: 10086</a>
<a href="mailto:jianghao@jerei.com">发邮件给: jianghao@jerei.com</a>
之后,我们学习了很好用的弹性盒子和它的属性:
弹性盒flex的使用
1.给父容器添加display:flex/inline-flex;属性。
2.父容器可以使用的属性值有:
①.flex-direction:属性决定主轴的方向(即项目的排列方向)。
row(默认值):主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿。
②.flex-wrap:如果一条轴线排不下,如何换行.
nowrap(默认):不换行。当父容器宽度不够时每个item会被适当挤压。当父容器宽度过大时不会拉伸。
wrap:换行,第一行在上方。
wrap-reverse:换行,第一行在下方。
③.flex-flow:flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
④.justify-content:justify-content属性定义了项目在主轴上的对齐方式。
flex-start(默认值):左对齐
flex-end:右对齐
center: 居中
space-between:两端对齐,项目之间的间隔都相等。(首位项目分别在父容器最左、最右)
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。(首尾项目与父容器边界有间隔。)
⑤.align-items:属性定义项目在交叉轴上如何对齐。
flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。(与项目行高,字体等会影响每行的基线)
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
⑥.align-content:属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
flex-start:与交叉轴的起点对齐。
flex-end:与交叉轴的终点对齐。
center:与交叉轴的中点对齐。
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
stretch(默认值):轴线占满整个交叉轴。
3.项目的属性:
①.order:属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
②.flex-grow:属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
如果所有项目的flex-grow属性都为1,
则它们将等分剩余空间(如果有的话)。
如果一个项目的flex-grow属性为2,其他项目都为1,
则前者占据的【剩余空间】将比其他项多一倍。
③.flex-shrink:属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
如果所有项目的flex-shrink属性都为1,
当空间不足时,都将等比例缩小。
如果一个项目的flex-shrink属性为0,
其他项目都为1,则空间不足时,前者不缩小。
负值对该属性无效。
④.flex-basis:属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。
⑤.flex:属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。
⑥.align-self:定义单个item在交叉轴上的对齐方式,可以覆盖父容器的align-item对齐方式。
默认为auto。表示继承父容器。
接下来就是用于响应式布局的属性:@media,
使用@media的三种方式
1.直接在css文件中使用
@media 类型 and (条件1) and (条件2){
css样式
}
2.使用@import导入
@import url() all and();
3.使用link链接,media属性用于设置查询方式。
<link rel="" href="" media="all and (max-width:)" />
以上就是这周我的h5学习内容。
H5学习的第三周的更多相关文章
- 学习Java第三周
这是学习java的第三周 上周想要学习的这周也完成了,研究和测试代码花费了大约2个小时,发现这些内容方法居多,想要熟练掌握就要好好记忆了 包装类 数字处理类 Object类 Java类包 内部类 下一 ...
- 学习。NET三周心得
目前为止 学习.NET已经快一个月了,有刚开始的不懂,到中途懵懂.再到现在的简懂 ,感觉自己迷了好多天,学习程序员跟学其他的程序还不同,其他的有固定格式,而.NET则固定很少 ,一直在用方法连接前后台 ...
- Python学习笔记第三周
目录 一.基础概念 1.集合 集合方法 a.设置集合 b.取交集 c.取并集 d.取差集 e.判断子集 f.判断父集 g.对称差集 基本操作: a.添加 b.删除 c.discard删除 d.长度 e ...
- 20135316王剑桥Linux内核学习笔记第三周
20135316王剑桥 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC 1000029000 三个法宝:存储程序计算机.函数调 ...
- Python基础学习(第三周)
集合的操作 集合是一个无序的,不重复的数据组合,它的主要作用如下: 去重,把一个列表变成集合,就自动去重了 关系测试,测试两组数据之间的交集,差集,并集等关系 集合的写法 list_1 = set([ ...
- 20145330《Java程序设计》第三周学习总结
20145330 <Java程序设计>第三周学习总结 第三周知识的难度已经逐步上升,并且一周学习两章学习压力也逐渐加大,需要更高效率的来完成学习内容,合理安排时间. 类与对象 对象(Obj ...
- Python 学习日记(第三周)
知识回顾 在上一周的学习里,我学习了一些学习Python的基础知识下面先简短的回顾一些: 1Python的版本和和安装 Python的版本主要有2.x和3.x两个版本这两个版本在语法等方面有一定的区别 ...
- H5学习第二周
怎么说,在各种感觉中h5学习的第二周已经过来了,先总结一下,感觉学习h5是一件让我爱恨交加的事,学会一些新的知识并把它成功运行出来的时候是非常激动和兴奋的,但是有时候搞不懂一个标签或者属性的时候,就有 ...
- 20145213《Java程序设计》第三周学习总结
20145213<Java程序设计>第三周学习总结 教材学习内容总结 正所谓距离产生美,上周我还倾心于Java表面的基础语法.其简单的流程结构,屈指可数的基本类型分类,早已烂熟于心的运算符 ...
随机推荐
- ubuntu16.04下安装配置深度学习环境(一、cuda7.5的安装)
1.下载所需要的软件 cuda7.5下载(点击下载链接),cudnn4.0下载 2.安装NVIDIA驱动. 一般有两种方法:1)一种方法是利用"软件和更新"来安装,依次选择 系统设 ...
- 阿里云开发之OSS数据迁移
最近由于项目需求,需要将一个aliyun账号下的oss数据导入到两一个aliyun账号下的oss,经过一番坎坷,最终搞定. 1.查看oss数据迁移官方文档,我是在本地windows电脑上进行操作的,先 ...
- DbUtils类基本使用
一.commons-dbutils简介 commons-dbutils 是 Apache 组织提供的一个开源 JDBC工具类库,它是对JDBC的简单封装,学习成本极低,并且使用dbutils能极大简化 ...
- 用smarty模板做的登录
用smarty模板做的登录和之前我们用php做的登录区别不大 首先要新建一个php文件 一般php文件,要放在这个文件里 它对应的html文件,要放在这个目录里 下面先来做php文件 要先引入入口文件 ...
- 从USB驱动器运行Windows 10
我相信很多人和我一样.梦想着有个随身携带的U盘版操作系统.无论走到哪里,只要有电脑都可以随时运行自己配置好的操作系统.本篇博文就会一步步的教你如何从USB驱动器加载和运行Windows 10. 让我想 ...
- 【Rsync项目实战】备份全网服务器数据
[Rsync项目实战]备份全网服务器数据 标签(空格分隔): Linux服务搭建-陈思齐 ---本教学笔记是本人学习和工作生涯中的摘记整理而成,此为初稿(尚有诸多不完善之处),为原创作品,允许转载,转 ...
- [hihoCoder]1014 Trie水题
最最最最最最最基本的Trie词频统计应用了. package trie; import java.util.Scanner; public class Main { public static voi ...
- sql查询表说明
一条神奇的sql语句 可以查询到数据库表的说明信息.如下:希望可以帮到大家 SELECT 表名 = case when a.colorder=1 then d.name else '' end, 表说 ...
- wemall app商城源码Android之支付宝接口公用函数
wemall-mobile是基于WeMall的Android app商城,只需要在原商城目录下上传接口文件即可完成服务端的配置,客户端可定制修改.本文分享wemall app商城源码Android之 ...
- yii2的变量是如何注入到视图中去的?
我对yii2的控制器中的变量如何渲染到视图中这个问题一直很好奇,另外,我还对yii2如何加载静态资源,如js和css比较好奇,于是趁着周末就看了下yii2的相关源码想把这两个问题都弄明白.变量如何渲染 ...