web网页网站开发方案知识点

web网页网站开发方案知识点总结，包括viewport 视窗、视网膜屏幕、任意添加大量的非中文信息、less编写css、过渡结束事件等等。

web网页网站开发方案知识点

• viewport 视窗
  • 移动设备上用来显示网页的区域
  • 通过meta设置，防止出现滚动条，提示用户体验
  • emmet语法
    • meta：vp+tab
  • • name="viewport"
      • 告诉浏览器meta标签设置的是viewport属性
    • content内设置的是viewport的属性
      • width
        • device-width 设备的宽度
      • height
        • 不重要，很少使用
      • user-scalable
        • 设置是否支持缩放，yes/no/false
      • initial-scale
        • 视口的默认缩放比例，一般设置的是1.0
      • maximum，minimun，允许用户的最大最小缩放值
• 移动端浏览器
  • 主流浏览器
    • uc 不支持弹性布局
  • 内核都是webkit，几乎不用考虑兼容性
• 视网膜屏幕
• 任意添加大量的非中文信息
  • lorem+数字（可写可不写）+tab
• 样式注意
  • 盒子模型
    • 保证盒子的大小不变，可以改变内容，避免出现多余的滚动条
    • box-sizing:border-box
      • -webkit-box-sizing: border-box;/*webkit内核兼容性写法*/ box-sizing: border-box;
  • 点击高亮效果
    • -webkit-tap-highlight-color: transparent ;清除默认的高亮点击效果
  • input默认样式清除（扁平化效果）
    • -webkit-appearance:none;
  • 最小宽度和最大宽度
    • max-width
      • 在行业当中移动端的设计图一般使用的是640px
      • 为了防止用户无止境的缩放
    • min-width
      • 移动设备中最小的尺寸是320px
      • 为防止在小屏幕上显示错乱
  • 注意：移动端为了进行适配，宽度一般情况都是使用百分比
  • sans-serif移动端的默认字体
• less编写css
  • 定义变量
    • @jdColor:red;
  • 变量函数
    • .wid(@wid:100%){width:@wid;}
  • 嵌套
    • 加快css的书写速度
• 过渡结束事件
  • 需要使用addEventListener调用
  • 结束事件transitionEnd
  • 需要添加浏览器的前缀webkit
    • webkitaddEventListener
• 移动端特有事件
  • touch
    • touchstart
      • 事件参数中 有触摸点的值
        • event.touches[0].clientX;
    • touchmove
      • 事件参数中 有触摸点的值
    • touchend
      • 事件参数中 没有触摸点的值
    • 只能通过addEventListener方式进行绑定
  • 常见封装
    • 左滑,右滑
    • 长按
    • 捏合
• 移动端click事件的触发会延迟200ms
  • 所以需要用touch事件封装模拟一个tap方法事件(模拟点击事件)
• Date.now()获取当前的时间
• 响应式
  • 针对所有设备,目的是开发一次即可,会根据设备的屏幕尺寸改变而改变
  • 媒体查询(css3推出)
    • 就是可以通过css去获取一些设备的信息
    • @media screen and (min-width:480px) {}
      • and后一定要记得写空格,否则无效
  • 前端框架
    • bootstrap
      • 原理：媒体查询
      • 注意模板的引用，使用前先引入模板
        • 说明
        • • 低版本ie中 实现 媒体查询的 js
        • • html5新语义标签的兼容性js
      • 栅格系统
      • 快速浮动
        • 辅助类里面
          • pull-left pull-right
• alt+shift+w,标签包裹
• nth-of-type
  • c3h5的属性选择器的一种
• zepto
  • 移动端使用,类似于jquery的插件
  • 想要使用不同的功能,需要导入对应的模块
  • 现在不太流行
• gitbook
  • 前端工程师手册
• rem