上周,我们结束了京东站的制作,本周我们开始了手机站和响应式网站的学习,并仿制了一个手机端界面和一个响应式界面,在完成这两个网站的过程中我遇到了许多问题,也了解了它们的解决方法,接下来我讲详细介绍本周我们的学习内容。

周一,我们了解了像素之间的关系,具体为:

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学习的第三周的更多相关文章

  1. 学习Java第三周

    这是学习java的第三周 上周想要学习的这周也完成了,研究和测试代码花费了大约2个小时,发现这些内容方法居多,想要熟练掌握就要好好记忆了 包装类 数字处理类 Object类 Java类包 内部类 下一 ...

  2. 学习。NET三周心得

    目前为止 学习.NET已经快一个月了,有刚开始的不懂,到中途懵懂.再到现在的简懂 ,感觉自己迷了好多天,学习程序员跟学其他的程序还不同,其他的有固定格式,而.NET则固定很少 ,一直在用方法连接前后台 ...

  3. Python学习笔记第三周

    目录 一.基础概念 1.集合 集合方法 a.设置集合 b.取交集 c.取并集 d.取差集 e.判断子集 f.判断父集 g.对称差集 基本操作: a.添加 b.删除 c.discard删除 d.长度 e ...

  4. 20135316王剑桥Linux内核学习笔记第三周

    20135316王剑桥 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC 1000029000 三个法宝:存储程序计算机.函数调 ...

  5. Python基础学习(第三周)

    集合的操作 集合是一个无序的,不重复的数据组合,它的主要作用如下: 去重,把一个列表变成集合,就自动去重了 关系测试,测试两组数据之间的交集,差集,并集等关系 集合的写法 list_1 = set([ ...

  6. 20145330《Java程序设计》第三周学习总结

    20145330 <Java程序设计>第三周学习总结 第三周知识的难度已经逐步上升,并且一周学习两章学习压力也逐渐加大,需要更高效率的来完成学习内容,合理安排时间. 类与对象 对象(Obj ...

  7. Python 学习日记(第三周)

    知识回顾 在上一周的学习里,我学习了一些学习Python的基础知识下面先简短的回顾一些: 1Python的版本和和安装 Python的版本主要有2.x和3.x两个版本这两个版本在语法等方面有一定的区别 ...

  8. H5学习第二周

    怎么说,在各种感觉中h5学习的第二周已经过来了,先总结一下,感觉学习h5是一件让我爱恨交加的事,学会一些新的知识并把它成功运行出来的时候是非常激动和兴奋的,但是有时候搞不懂一个标签或者属性的时候,就有 ...

  9. 20145213《Java程序设计》第三周学习总结

    20145213<Java程序设计>第三周学习总结 教材学习内容总结 正所谓距离产生美,上周我还倾心于Java表面的基础语法.其简单的流程结构,屈指可数的基本类型分类,早已烂熟于心的运算符 ...

随机推荐

  1. 球谐光照(Spherical Harmonics Lighting)及其应用-应用篇

    上一篇介绍了球谐函数的一些原理和性质,本篇主要介绍如何实现球谐光照,将这种光照应用到实际的场景中去. 我们知道,球谐光照实际上就是将周围的环境光采样成几个系数,然后渲染的时候用这几个系数来对光照进行还 ...

  2. 了解 : Odata 的 $filter

    api/jobPosts?$filter=company/name eq "string" //基本 api/orders?$filter=orderItem/product/EF ...

  3. 使用咪咕云做C站视频直链源

    首先我们先百度搜索一下“咪咕云” 点击进入-->用户注册或登录 注册时选择个人用户-->前往邮箱激活-->进入邮箱激活成功后重新登录 登录后在控制台选择“云点播” 即可进行上传视频了 ...

  4. Python入门教程(2)

    人生苦短,我玩蛇0.0! Python(英语发音:/ˈpaɪθən/), 是一种面向对象.解释型计算机程序设计语言,由Guido van Rossum于1989年底发明,第一个公开发行版发行于1991 ...

  5. [转载]解决win10 VC++6.0 应用程序无法正常运行 0xc0000142

    本文转载自http://blog.csdn.net/w_9449/article/details/52864135 转载请申明哦,其实我发现自从我在贴吧发了帖子后,就冒出了不少帖子.经验.当然方法和我 ...

  6. sql 语句优化

    sql语句性能达不到你的要求,执行效率让你忍无可忍,一般会时下面几种情况. 网速不给力,不稳定. 服务器内存不够,或者SQL 被分配的内存不够. sql语句设计不合理 没有相应的索引,索引不合理 没有 ...

  7. 深入理解 JavaScript 异步系列(2)—— jquery的解决方案

    第一部分,jQuery-1.5 之后的 ajax 本地址http://www.cnblogs.com/wangfupeng1988/p/6515779.html未经允许不得转载~ $.ajax这个函数 ...

  8. Redis 11种Web应用场景举例

    在"怎样让redis在你的系统中发挥作用"一文中,salvatore 'antirez' sanfilippo告诉我们如何利用redis独有的数据结构处理能力来解决一些常见问题.一 ...

  9. vbs文件小技巧

    vbs文件介绍: VBS是基于Visual Basic的脚本语言.VBS的全称是:Microsoft Visual Basic Script Editon.(微软公司可视化BASIC脚本版). 可以新 ...

  10. wemall app商城源码Android之支付宝接口公用函数

    wemall-mobile是基于WeMall的Android app商城,只需要在原商城目录下上传接口文件即可完成服务端的配置,客户端可定制修改.本文分享wemall app商城源码Android之  ...