文档章节

前端的那些事之移动端--基础

上官清偌
 上官清偌
发布于 2016/12/25 23:00
字数 1045
阅读 7
收藏 0

移动端基础知识

  • 视口
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

- device-width: 设备宽度
- initial-scale: 初始的缩放比例
- minimum-scale=1:允许用户缩放到的最小的比例
- maximum-scale=1:允许用户缩放到的最大的比例
- user-scalable:用户是否可以手动缩放
  • 自适应的单位(px, em, rem)
    • px: 在web页面初期的制作中,我们会使用px来设置我们的文本,他比较稳定和精确。
    • em: 浏览器中放大或者是缩小的时候 em 能改变大小, (大小会随着父级元素的大小改变而改变);
    • rem: 浏览器中放大或者是缩小的时候 rem 能改变大小, (大小会随着根级元素的大小改变而改变);
    • 16px = 1em
    • 16px = 1rem
  • rem换算关系
    • html{font-size: 62.5%; /* 10 / 16 * 100% = 62.5%*/} 10px = 1rem
    • html{font-size: 625%; /* 100 / 16 * 100% = 625%*/} 100px = 1rem
  • 媒体查询
@media{}
	链接引用方式
	<link rel="stylesheet" media="screen and (min-width: 600px)" type="text/css" href="css/css2.css"/>
	@media screen and (min-width: 600px) and (min-width: 600px) {
		选择器:{
			属性: 属性值;
		}
	}

  • 多列
    • column-count 指定设置的栏目的列数
    • column-width 指定设置的栏目的宽度
    • column-gap 改变栏目之间的长度 默认是1em
    • column-rule 间隔的位置的边框 (分割线)
    • column-break-inside: avoid; 为了避免item被拦腰截断 (针对于子元素的)
多列demo
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style type="text/css">
			*{padding: 0px; margin: 0px;}
			
			section{width: 80%; margin: 0 auto;}
			.page{
				column-count: 4;
				/*column-width: 250px;*/
				column-gap: 20px;
				column-rule: 2px dashed red;
			}
			.page div img{width: 100%;display: inline-block;}
			
			.page div{-webkit-column-break-inside: avoid;}

		</style>
	</head>
	<body>
		
		<section>
			<div class="page">
				<div id="">
					<img src="img/1.jpg"/>
					<h1>第七次课水电费</h1>
					<p>上课了大家分开了十分简单速度快解放束带结发绿色减肥了水电费lksf</p>
				</div>
				<div id="">
					<img src="img/2.jpg"/>
					<h1>第七次课水电费</h1>
					<p>上课了大家分开了十分简单速度快解放束带结发绿色减肥了水电费lksf</p>
				</div>
				<div id="">
					<img src="img/3.jpg"/>
					<h1>第七次课水电费</h1>
					<p>上课了大家分开了十分简单速度快解放束带结发绿色减肥了水电费lksf</p>
				</div>
				<div id="">
					<img src="img/4.jpg"/>
					<h1>第七次课水电费</h1>
					<p>上课了大家分开了十分简单速度快解放束带结发绿色减肥了水电费lksf</p>
				</div>
				<div id="">
					<img src="img/5.jpg"/>
					<h1>第七次课水电费</h1>
					<p>上课了大家分开了十分简单速度快解放束带结发绿色减肥了水电费lksf</p>
				</div>
				<div id="">
					<img src="img/1.jpg"/>
					<h1>第七次课水电费</h1>
					<p>上课了大家分开了十分简单速度快解放束带结发绿色减肥了水电费lksf</p>
				</div>
				<div id="">
					<img src="img/2.jpg"/>
					<h1>第七次课水电费</h1>
					<p>上课了大家分开了十分简单速度快解放束带结发绿色减肥了水电费lksf</p>
				</div>
				<div id="">
					<img src="img/3.jpg"/>
					<h1>第七次课水电费</h1>
					<p>上课了大家分开了十分简单速度快解放束带结发绿色减肥了水电费lksf</p>
				</div>
			</div>
		</section>
		
		
	</body>
</html>
  • 伸缩性盒模型(Flexible-box)
    • 容器属性: 属性决定了主轴的方向
    • 个轴线排不下, 怎么去换行 flex-wrap: nowrap | wrap | wrap-reverse nowrap(默认): 不换行
      • row(默认值): 主轴为水平方向,起点在左端
      • column: 主轴为垂直方向,起点在上方
      • row-reverse:主轴为水平方向,起点在右边
      • column-reverse:主轴为垂直方向,下方
    • flex-wrap属性 | 如果一个轴线排不下, 怎么去换行
      • flex-wrap: nowrap | wrap | wrap-reverse
      • nowrap(默认): 不换行
      • wrap: 换行, 第一行在上方
      • wrap-reverse: 换行,第一行在下方
  • flex-flow | 属性值是flex-direction属性和flex-wrap属性的简写形式
  • justify-content: flex-start | flex-end | center | space-between | space-around
    • flex-start(默认值): 左对齐
    • flex-end(默认值): 右对齐
    • center: 居中
    • space-between: 两端对齐, 项目之间都相等
    • space-around: 每个项目两侧的间隔相等,项目之间的间隔比项目与边框的间隔大一倍

© 著作权归作者所有

上官清偌
粉丝 11
博文 87
码字总数 123753
作品 0
浦东
程序员
私信 提问
史上最全的前端资源大汇总

1.前言 最近有很多朋友问我有没有相关的书籍推荐,希望能够自学一下前端。 正好最近在查阅文章的时候,发现有朋友已经进行过总结。 经过沟通和“行贿”��,终于取得转载权利,在此感谢晚晴...

mr_lp
2017/01/13
0
0
全栈工程师的能力点

全栈工程师是对于除了bat的主站以外的大多数项目,这样的能力也许不是一个方面的专家,但是能再一定时间快速解决一个问题。可能做服务器的发展成全站更容易一些,但是一切能力都是可以通过练...

LANTIANFEIYING
2016/11/08
0
0
未来的前端工程师

作者简介:aoto 蚂蚁金服数据前端 以下我说的都是个人观点,比较宏观粗浅,主要针对的是前端工程师本身,没有深入技术和业务细节,请谨慎参考。 职能概览 前端工程师首先是个程序员,其次也是...

2017/12/30
0
0
【DTalk精华】网易郑栋:如何打通产品多端的埋点数据?

郑栋, 网易互联网分析产品、可视化 BI 产品负责人。多年从事大数据技术相关工作,目前在网易管理互联网分析、敏捷BI两个数据分析产品线,在大数据技术、互联网业务数据体系建设、团队管理方面...

叨叨侠爱叨叨
2018/04/24
0
0
web前端,使用HTML5+CSS+JS框架有那些好处

相信很多程序猿朋友都用过框架,不过你是否知道你用的是HTML框架、CSS框架还是JS框架,其实这都不重要,重要的是使用框架的目的是什么?是不是节约了开发项目时间陈本,这事多么伟大的一箱工...

it智云编程
2018/07/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

32位与64位Linux系统下各类型长度对比

64 位的优点:64 位的应用程序可以直接访问 4EB 的内存和文件大小最大达到4 EB(2 的 63 次幂);可以访问大型数据库。本文介绍的是64位下C语言开发程序注意事项。 1. 32 位和 64 位C数据类型...

mskk
30分钟前
6
0
Vue 实现点击空白处隐藏某节点(三种方式:指令、普通、遮罩)

在项目中往往会有这样的需求: 弹出框(或Popover)在 show 后,点击空白处可以将其 hide。 针对此需求,整理了三种实现方式,大家按实际情况选择。 当然,我们做项目肯定会用到 UI 框架,常...

张兴华ZHero
37分钟前
7
0
SpringBoot激活profiles你知道几种方式?

多环境是最常见的配置隔离方式之一,可以根据不同的运行环境提供不同的配置信息来应对不同的业务场景,在SpringBoot内支持了多种配置隔离的方式,可以激活单个或者多个配置文件。 激活Profi...

恒宇少年
38分钟前
8
0
PDF修改文字的方法有哪些?怎么修改PDF文件中的文字

PDF修改文字一直以来都是一个难以解决的问题,很多的办公族在办公的时候会有修改PDF文件中的文字的需要,可是PDF文件一般是不能进行编辑和修改的,难道就没有什么办法解决这个问题了嘛?不要...

趣味办公社
41分钟前
5
0
企业组织中采用服务网格的挑战

作者:Christian Posta 译者:罗广明 原文:https://blog.christianposta.com/challenges-of-adopting-service-mesh-in-enterprise-organizations/ 编者按 本文作者介绍了企业组织采用服务网...

jimmysong
51分钟前
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部