移动端适配 /移动开发与桌面开发

适配(为了加上mate标签后实现等比)

什么是适配?页面在不同设备上等比展示

适配的目的:百分百还原设计图

rem适配的原理:改变了一个元素在不同设备上占据的css像素的个数

移动开发与桌面开发


 

手机网页开发(移动网页)

  • 使用的技术是一样的
  • 区别仅在屏幕尺寸和交互方式

 

1.设置viewport

mate标签(元数据)是数据的数据信息

   标签提供了 HTML 文档的元数据。元数据不会显示在客户端,但是会被浏览器解析。
//写在head标签内

viewport是html的父元素

下面语句设置它的尺寸

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

//width=device-width 宽度等于设备宽度
//height=device-height 高度等于设备高度
//initial-scale 初始缩放比例
//maximum-scale 允许用户缩放最大比例
//minimum-scale 允许用户缩放最小比例
//user-scalable  是否允许用户缩放

2.调试页面

chrom开发者工具调试手机页面 //浏览器兼容问题  最终还是要手机看一下

标签和css有一些兼容性问题   网站caniuse  网站查阅

3.媒体查询/响应式设计

定义:根据分辨率不同选择不同的样式

主要作用:

  • 监测媒体类型,比如 screen,tv等
  • 监测布局视口的特性,比如视口的宽高分辨率等

用法

//用在style标签内部

@media all // 所有媒体类型,tv,手机,打印机 
and  //逻辑操作
(min-width: 200px) and (max-width: 300px) {
body {}
}    

缺点:很多重复的css 

Hxbrid app(混合开发)

混合开发基础:

写的网页运行在手机程序中。本来网页提供的功能是有限的。

但是应用程序可以给页面添加函数

在这种情况下,js就可以调用别人提供的功能

例子:

比如js不能实现手机震动

ios 安卓 可以让手机震动

ios写一个object C 让手机震动,并且暴露出去

把这个东西注册为网页的一个js函数

js调用这个js函数 手机就震动

js函数调用object C 让手机震动

 

总结:看上去是js让手机震动,只要把api提供给js

js代码就是用别人提供的功能写逻辑


技术总结

em

em相对自身的fontsize  比如浏览器fontsize = 16px 

  <style>
    article {
      font-size: 20px;
      width: 10em;
      height: 10em;
      background: lightskyblue;
    }
  style>   // current  200*200px

  <style>
    article {
      width: 10em;
      height: 10em;
      background: lightskyblue;
    }
  style>   // current  160*160px

1.rem相当于html根标签的fontsize

任何设备1rem = html 标签下 fontsize值

rem方案适配

要求:相同元素在不同设备上的等比展示

rem适配原理:改变一个元素在不同设备上占据的css像素的个数

优点: 有完美视口//没有破坏完美视口

缺点: px值到rem的转换复杂

var styleNode = document.createElement("style")
var w = document.documentElement.clientWidth/16
styleNode.innerHtml = "html{font-size:"+w+"px !important}"  //
document.head.appendChild(styleNode)

 

2.viewport适配原理

每一个元素在不同设备上占据的css像素个数是一样的。但css像素和

物理像素的比例是不一样,等比的

优点:所量即所得

缺点:没有使用完美视口




                    
                    

你可能感兴趣的:(移动端适配 /移动开发与桌面开发)