移动web开发

作者: wangpansheng | 来源:发表于2017-02-23 01:11 被阅读48次

前期准备

流式布局

  • 就是百分比布局,通过盒子的宽度设置成百分比,根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。容器的百分比都是相对于其直接父元素计算的。是移动web开发常用的布局方式!
  • 全屏页面
      .container {
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      }
      /*容器设置固定定位之后,脱离标准流,宽高的百分比就是相对与浏览器窗口来算的,所以设置固定定位之后,就可以全屏*/
    
  • 利用overflow:hidden制作一边固定宽,一边自适应的容器
      div:first-child {
      width: 100px;
      height: 100px;
      background-color: pink;
      float: left;
      }
      div:last-child {
      overflow: hidden;
      }
      /*利用overflow:hidden;的bfc特性,制作绝缘盒子,左边盒子左浮,右边盒子自适应*/
    

Viewport视口

  • 认识viewport:viewport是仅在移动端存在的,用来盛放网页内容的虚拟容器,可以设置宽高,设置缩放比,设置是允许用户缩放。也就是我们的视觉窗口。
  • 移动端适配标准
    1. 网页的宽度和浏览器(设备)的宽度保持一致
    2. 网页的缩放比1:1的缩放比
    3. 不允许用户自己缩放
      <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
      
      <!--width:设置容器的宽度,device-width就是设备-->
      <!--user-scalable,设置是否允许用户缩放,yes/1为允许,no/0为禁止-->
      <!--initial-scale,设置视口的缩放比,标准取值1.0,取值范围0-10-->
      <!--maximum-scale=1.0,最大缩放比为1.0-->
      <!--minimum-scale=1.0,最小缩放比 为1.0-->
      <!--emmet快捷语法  meta:vp + tab-->
    

移动端事件 Touch

touch事件最初只是在苹果设备上使用的,由于移动设备的发展,导致touch虽然不是行业标准,但是移动端的支持却是非常好。

  • touchstart 手指开始触摸屏幕是触发事件
  • touchmove 手机在屏幕上移动时,连续触发事件
  • touchend 手指离开屏幕时,触发事件
  • touchcance 触摸事件被意外事件(如来电话,或弹窗)终止时触发,使用较少
    1. 触摸事件的响应顺序
    • touchstart
    • touchmove
    • touchend
    • onclick 300ms延时
    1. Touch事件的事件对象
    • 都是触摸点坐标的集合(会有多点触摸)
    • changedTouches 触发事件时,改变的触摸点在屏幕的坐标点集合
    • targetTouches 所有触摸点在绑定事件的元素上的坐标点
    • touches 所有触摸点在屏幕上的坐标点集合
    1. 坐标包含的信息
    • client 视口的坐标
    • page 页面的坐标
    • screen 屏幕的坐标
    1. tap事件
    • click在移动端的响应事件是300ms
    • tap是由前端框架或者库封装来的,响应速度比较快。
    • 由于移动设备的特殊性,click事件在移动端的响应速度是300ms,tap事件的速度比较快,所以在移动端设置点击事件,需要使用tap

进击的bootstrap

响应式开发

  • 随着移动互联网的迅速发展,我们的pc端的页面已经不能满足移动设备的阅读需求,
  • 通常的做法是,单独开发一个移动版的网站,但是随着由于设备类型的复杂和增多,我么需要开发一个响应式的网站,可以根据设备的不同自动适应为不同版本的页面,
  • 简而言之就是开发一个页面兼容多个终端。随着移动设备的增多,新建的网站普遍采用这种方式
  • 开发原理,利用css3中的媒体查询media,通过查询screen的宽度来指定某个宽度区间的网页布局
    1. 超小屏幕(移动设备) 768px以下 版心宽100%
    2. 小屏设备 768px-992px之间 版心宽750px
    3. 中屏设备 992px-1200px之间 版心宽970px
    4. 大屏设备 1200px以上 内容版心宽1170px
  • media 媒体查询的使用
        /*需要查询的屏幕 加条件需要 and 中间需要空格*/
       @media screen and (min-width: 1200px){
         /*设置样式css代码*/
        }
    
    也可利用覆盖原则,使用单向覆盖媒体查询,减少代码

初识bootstrap

  1. 简介
  • 作者:twitte两位前端工程师,在2001年开发完成。
  • 当前最流行的前端UI框架(有预制界面组件)
  • 一个前端技术网站 www.awesomes.cn
  • 特点:简洁,直观,强悍的前端开发框架,让web开发更迅速,更简单,
  • 优点:持续更新,拥有简洁直观强悍的组件,有定义好的ui组件样式,但是自定义扩展性强,方便修改默认样式
  1. 版本:
    • 2.xx 停止维护
      • 优点:兼容性好
      • 缺点:代码不够简洁,功能不够完善
    • 3.xx 目前使用最多
      • 稳定,但是放弃了IE6 IE7,对IE8支持,但是界面效果不好,偏向于开发响应式布局,移动设备优先的web项目。
    • 4.xx 测试阶段
      • 更偏向于响应式,移动设备,代码简洁
      • 不支持IE8
  2. Map文件
  • 通常在使用压缩版的js和css文件时,如果出错,浏览器就会提示那一行出错。Map就是记录了代码位置的文件。

入门bootstrap

  1. Normalize.css
  2. 响应容器
  3. 栅格系统

less快速入门

安装

  1. less是要基于node.js运行的,所以需要先安装node.js.

    • 查看node.js版本:node -v
    • 查看npm版本 npm -v
  2. 在线安装less

    npm install -g less

  3. 离线安装less

    • 路径C:\Users\对应用户名\AppData\Roaming\npm
    • 查看less版本 lessc -v

入门简介

  • 简介 css是一门非程序语言,不利用复用,不方便维护及扩展,没有变量,函数,作用域等概念,less在css的语法基础上,引入了变量,运算及函数等功能,简化了css的编写降低了css的维护成本,less可以让我们用更少的代码做更多的事情。
  • 原理 less包含一套语法及一个解析器,我们可以根据这些语法定义样式规则,最终会通过解析器,编译成对应的css文件。less不是来代替css的,而是在css的语法基础上,为css加入程序式语言的特性。

基础语法

  1. 变量
  • less允许我们自定义变量,可以在全局样式中使用,使我们修改样式更方便假单。
    //@charset "utf-8";  头部添加这段代码防止中文乱码
    //less中的注释会编译到css当中的
    //这种注释不会编译到css中,
    /*这种注释会编译到css中*/
    //定义变量
    @wjsColor:#ccc;
    //变量名必须以@开头,不能以数字开头,不能包含特殊字符
    a:hover{
      color: @wjsColor;
    }
    
  1. Mixin混入
  • Minxin类似js中的回调函数,把一个函数传入另一个函数内,定义函数时,在选择器后边加上括号,可以设置形参设置默认值,如果不传参数,就是使用默认值,调用的时候,在另一个选择器的样式内,传入实参即可。
    @charset "utf-8";
    
    //定义变量
    @color: red;
    
    //定义函数,不会编译到css中
    .w50(@width:50%) {
      width: @width;
      background-color: @color;
    }
    
    //定义函数,形参可以设置默认值
    .fl(@fr:left) {
      float: left;
    }
    
    /*得到宽度50%背景颜色红色左浮动的样式*/
    .w50fl {
      .w50(40px);
      .fl(right);
    }
    

使用less开发移动版苏宁站点

相关文章

  • HTML基础

    新的征程 web前端介绍 web前端开发做什么 pc端web开发;移动端web开发;混合app开发;网页游戏/移动...

  • Android 网络应用最佳做法

    Best practices for web apps 与桌面 Web 开发相比,为移动设备开发网页和 Web 应...

  • 给移动端web开发设置viewport

    给移动端web开发设置viewport

  • 移动web开发

    移动web开发现状 浏览器问题 设备屏幕问题 使用技术问题 主流设备尺寸 注:以上数据均参考 https://ma...

  • 移动web开发

    1.为什么去学习移动web?已经从趋势变成了一个主流了,互联网的流量入口已经大于PC端的流量入口2.兼容性在国内的...

  • 移动Web开发

    三种布局 有最大、最小宽度的百分比自适应布局适用场景:门户网站首页,图片较多的首页。 百分比自适应布局适用场景:信...

  • 移动web开发

    前期准备 流式布局 就是百分比布局,通过盒子的宽度设置成百分比,根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容...

  • 移动web开发

    1. Zepto库和JQ区别 Zepto相对jQuery更加轻量,主要用在移动端,jQuery也有对应的jQuer...

  • 移动web开发

    像素基础 px 逻辑像素,浏览器使用的抽象单位 dp,pt 设备无关像素 dpr 设备像素缩放比=独立像素 / 物...

  • 移动web开发

    前端开发常用单位 像素 在前端开发中视口的水平方向和垂直方向是由很多小方格组成的,一个小方格就是一个像素 特点: ...

网友评论

本文标题:移动web开发

本文链接:https://www.haomeiwen.com/subject/bkevwttx.html