移动WEB开发基础概念与技术大总结

meta视口标签

• meta 视口标签

    <meta name="viewport" content="width=device-width. user-scalable=no,initial-scale=1.0
    ,maximum-scale=1.0,minimun-scale=1.0">
  

  标准的viewport设置

  1. 视口宽度和设备保持一致
  2. 视口的默认缩放比例1.0
  3. 不允许用户自行缩放
  4. 最大允许的缩放比1.0
  5. 最小允许的缩放比1.0

二倍图

• 二倍图

手机的像素比 是1px (pc端)= 2px(手机端里) // 所以手机看会放大

    img { //手机会把它放大2倍，所以这里设置它变小2倍，这样设置手机观看清晰度会更高！
    		width:50px;
    		height:50px;
    }
    //先放一个100*100 的图片
    <img src="images/100*100.jpg" >

背景缩放 background-size: 图片宽度 图片高度

    div {
    background-size: 500px 200px;
    background-size: 500px ; //只写一个参数 肯定是宽度 高度省略了， 会等比例缩放
    background-size: cover; //要完全覆盖div盒子 可能有部分背景图片显示不全
    background-size: contain; //高度和宽度等比例拉伸， 当宽度或者高度铺满div盒子就不再进行拉伸
    }

移动端技术解决方案

box-sizing:border-box; //css3盒子模型
box-sizing:content-box; //传统盒子模型

• 移动端可以全用CSS3盒子模型
• pc端 要看兼容性

特殊样式

//css3盒子模型
box-sizing:border-box;
-webkit-box-sizing:border-box;
//点亮高亮我们需要清除清除 设置为transparent 完成透明
-webkit-tap-highlight-color: transparent;
//在移动端浏览器默认的外观在ios上加上这个属性才能给按钮和输入框自定义样式
-webkit-appearance: none;
//禁用长按页面时的弹出菜单
img,a {-webkit-touch-callout:none;}

移动端常见布局

flex弹性布局(推荐)

• flex弹性布局(推荐)

  

  

  

  flex布局父项创建属性:

  flex-direction 设置主轴方向，进行自动排列 （默认为row）

  

    div {
    	display:flex;
    	flex-direction: column; //设置y轴为主轴
    }
  

  justify-content 设置主轴上子元素的排列方式 (默认为 flex-start)

  

    div {
    	display:flex;
    	justify-content:space-around //让子元素平分剩余空间
    	justify-content:center //让子元素居中对齐
    	justify-content:space-between; //先两边贴近 然后再评价分配
    }
  

  flex布局中，默认的子元素是不换行的，如果装不开，会缩小子元素的宽度，放到父元素里

  flex-warp (默认是nowrap,即不换行)

    flex-warp: warp; //超出会换行
  

  align-items 设置侧轴上的子元素排列方式(单行)

  

    div {
    	display: flex;
    	justify-content:center; //默认x是主轴（row）居中， 则侧轴为y
    	align-items: center; //侧轴居中
    	
    }
  

  align-content 设置侧轴上的子元素的排列方式(多行，单行无效)

  

    div {
    	display:flex;
    	flex-warp: warp;//有了换行，此时我们的侧轴上控制子元素的对齐方式我们用align-content
    	align-content:space-between; //贴着侧轴两边，其他平均分配
    	align-content:space-around; //平均分配
    	
    }
  

  align-content 和 align-items 区别

  

  flex-flow

    div {
    	display:flex;
    	flex-direction: column; //主轴为y
    	flex-wrap: wrap;  //可换行
    	//把主轴方向和是否换行(换列) 简写
    	flex-flow: row wrap;
    }
  

  总结flex布局父项属性总结:

  1. flex-direction: 设置主轴方向
  2. justify-content:设置主轴上的子元素排列方式
  3. flex-wrap: 设置子元素是否换行
  4. align-content: 设置侧轴上的子元素的排列方式(多行)
  5. align-items: 设置侧轴上的子元素排列方式(单行)
  6. flex-flow:复合属性，相当于设置了 flex-direction 和 flex-wrap

  flex布局子项常见属性：

  flex 定义子项目分配剩余空间，flex来表示占多少分

    section {
    	display: flex;
    	width: 60%;
    	height: 150px;
    	background-color:pink;
    	margin:0 auto;
    }
    // 左右固定 中间自适应！
    section div:nth-child(1) {
    		width:100px;
    		height:150px;
    		background-color:blue;
    }
    section div:nth-child(2) {
    	flex:1; //默认是0
    	background-color:green;
    }
    section div:nth-child(3) {
    	width:100px;
    	height:150px;
    	background-color:blue;
    }
    
    <section>
    	<div></div>
    	<div></div>
    	<div></div>
    <section>
  

  align-self 控制子项自己在侧轴上的排列方式

    div {
    	display:flex;
    }
    
    div span:nth-child(3) {
    	align-self: flex-end; // 让此盒子单独脱离组织自己行动
    }
    
    div span:nth-child(2) {
    	order:-1; // 移动自己，靠前排序， 默认是0， 越小越靠前
    }
    
    
    <div>
    	<span> 1</span>
    	<span> 2</span>
    	<span> 3</span>
    </div>
  

less+rem+媒体查询布

基础

• 基础

  rem基础：

  • em 是相对于父级的字体大小单位
  • rem是相对于html的字体大小单位
  • rem优点是通过修改html里面的文字大小来控制整体大小

  媒体查询：

  @media

  

  

    @media screen and (max-width:800px){ //在屏幕上 并且最大宽度是800px 设置我们想要的样式
    			body{
    		backgrond-color:pink;
    }
    }// 可以根据不同屏幕尺寸改变不同样式
  

  • 样式有重叠性，后面会覆盖前面的, ‘screen’ ‘and’ ‘px’ 必须带上

  引入资源：(最好是从小到大，针对不同屏幕尺寸，调用不同css文件)

    <link rel="stylesheet" href="style320.css" media="screen and (min-width:320px)">
    <link rel="stylesheet" href="style640.css" media="screen and (min-width:640px)">
  

  less基础：

  .less 文件 , 在vscode 安装less 插件即可转换为.css， 然后在html中引用

    @color:pink; //必须有@前缀,不能包含特殊字符,不能以数字开头,大小写敏感
    
    body {
    	background-color:@color;
    }
  

  也可以嵌套写

    .header {
    	width:200px;
    	height:200px;
    	background-color:pink;
    	a{
    		color:red;
    	&:hover{  //写伪类选择器 必须加&, 否则默认为后代选择器
    		color:blue;
    }
    }
    }
  

  less运算

    @border:5px +5;
    @baseFont:15px;
    div {
    	width:200px - 50; //运算符左右两侧加空格！
    	height:(200px + 50px) * 2; //2个数参与运算，只有一个数有单位则以这个单位为准
    	border: @border solid red;
    	background-color:#666 - #222; 
    }
    img {
    	width:82rem /@baseFont; //如果2个都有单位，且不同单位，以第一个单位为准！
    	height:82rem /@baseFont;
    }
  

适配方案

• 适配方案

  

  使用方案二:

  

  • 无需设置各种尺寸的@meta，flexible.js 是分刮10等分
  • cssrem插件自动将px 转化成rem，默认的html大小是 16px,要在设置的json里或者搜cssroot,自定义默认值
  • 不需要用less，直接在css中写
  • 顶部要加这个：

  

  

  

  

  将less文件 导入进less文件中

    @import "xxx" ; //可以不加后缀名
  

响应式页面兼容移动端(bootstrap)

概念

bootstrap框架：

• xs 超小屏幕
• sm 小屏幕
• md 中屏幕
• lg　大屏幕

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

bootstrap栅格系统:

• .container自动分为12列

bootstrap使用

- bootstrap使用

    <div class="container">
    <div class="row">// 大屏幕下排列方式 前缀是.col-lg-xx
    	<div class="col-lg-3">1</div>//一个占3份，一共12份，超出则另起一行
    	<div class="col-lg-3">2</div>
    	<div class="col-lg-3">3</div>
    	<div class="col-lg-3">4</div>
    </div>
    </div>

列嵌套(每个列里面 还会看成12等分)

    .row>div {
    		height:50px;
    		background-color:pink;
    }
    <div class="container">
    <div class="row">
    	<div class="col-lg-4">
    		<div class="row"> 	 //列嵌套里面最好加个row,就可以去掉父元素padding值
    			<div class="col-lg-6">1</div>
    			<div class="col-lg-6">2</div></div>
    </div>
    	<div class="col-lg-4">2</div>
    	<div class="col-lg-4">3</div>
    	
    </div>
    </div>

列偏移: col-md-offset-*

    <div class="container">
    <div class="row">
    	<div class="col-md-4">左侧</div>
    	<div class="col-md-4  col-md-offset-4">右侧</div> //往右走偏移四等分
    </div>
    <div class="row">//一个盒子的话 居中则偏移(12-8)/2
    	<div class="col-md-8 col-md-offset-2">中间盒子</div>
    </div>
    </div>

列排序 .col-md-push-* 和 .col-md-pull

    <div class="container">
    <div class="row">
    		<div class="col-md-4 col-md-push-8" >左侧</div>
    		<div class="col-md-8 col-md-pull-4">右侧</div>
    			
    	</div>
    </div>

在某屏幕下隐藏或显示

    <div class="container"> 
    	<div class="row">
    		<div class="col-xs-3">
    			<span class="visible-lg">我要显示了！</span> //只有大屏幕才显示
    </div>
    		<div class="col-xs-3">1</div>
    		<div class="col-xs-3 hidden-md">我要隐藏啦！</div>
    		<div class="col-xs-3">1</div>
    	</div>
    </div>

流式布局

• 流式布局(百分比布局)
  

总结

渐变色(小拓展)

背景颜色渐变 linear-gradient(起始方向,颜色1,颜色2,…)

background: -webkit-linear-gradient(left,red,blue); //浏览器必须加前缀
background: -webkit-linear-gradient(left,red,blue); //从左到右  红到蓝色渐变 
background: -webkit-linear-gradient(red,blue);//默认从上往下渐变
background: -webkit-linear-gradient(top left,red,blue);//左上角 到右下角渐变