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表面的基础语法.其简单的流程结构,屈指可数的基本类型分类,早已烂熟于心的运算符 ...
随机推荐
- smarty模板基础1
smarty模板的作用可以让前端和后端分离(也就是前端的显示页面和后端的php代码). smarty模板的核心是一个类,下载好的模板中有这么几个重要的文件夹 (1)libs核心文件夹(2)int.in ...
- 分页控件AspNetPager学习笔记
1.AspNetPager简介 AspNetPager是一款开源.简单易用.可定制化等等各种优点的Web分页控件. 2.使用方法 1)下载AspNetPager.dll文件(http://www.we ...
- Java进制转换示例
收藏的代码,以备查询之用.进制之间转换都是以十进制作为中间层的. int os = 16; //十进制转成十六进制: Integer.toHexString(os); //十进制转成八进制 Integ ...
- h5标签基础 table表格标签
一.表格的定义:用于有规范的显示数据. 二.基本组成: 行<tr>/列<td>/表头<caption>/表标题<th> eg: <table> ...
- lucene倒排索引缓冲池的细节
倒排索引要存哪些信息 提到倒排索引,第一感觉是词到文档列表的映射,实际上,倒排索引需要存储的信息不止词和文档列表.为了使用余弦相似度计算搜索词和文档的相似度,需要计算文档中每个词的TF-IDF值, ...
- 【NodeJs】记录一个阿里云redis的坑
背景 一个风和日丽的下午,一个上线的大好日子,以为一切准备好,上个线也就三五分钟的事.但是... 图样图森破. 背景是这样的,项目需要,在阿里云开通redis,在项目中配好redis的连接字符串后,以 ...
- 基于定位下拉框或者需要点击link才显示的下拉框,二次定位与多次定位实现的实际效果区别
还是基于上次那个练习的后续出现的思考,http://www.cnblogs.com/8013-cmf/p/6555790.html 界面: 源码: 写法如下: 继续解释这两种的区别: 1.其实基于定 ...
- 学学简单的-------------javaScript基础
首先知道什么是JavaScript? JavaScript是一种描述性语言,也是一种基于对象和事件驱动的.并具有安全性的脚本语言. 2.JavaScript由三部分组成:①ecmascript ②Bo ...
- spring项目中dubbo相关的配置文件出现红叉的问题
近来在eclipse中导入了一个web项目,但是发现项目上有红色的叉号. 原来是spring中关于dubbo的配置文件报错了. Multiple annotations found at this l ...
- vue搭建开发环境
windows下搭建vue开发环境 一.安装node.js 安装 vue项目通常通过webpack工具来构建,而webpack命令的执行是依赖node.js环境,所以首先要安装node.js. n ...