移动端适配方法合集

转自： http://azq.space/blog/bigcan-lesson-1/

1.简单粗暴型

zoom方式：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"><!--必须,放在head标签中-->
<script>
    var _SCALE_ = 1;
    _SCALE_ = function (){
    var deviceWidth = document.documentElement.clientWidth,
    scale = deviceWidth / 640;
    scale = scale > 1 ? 1 : scale;
    document.body.style.zoom = scale;
    return scale;//留着给js用
}();//在body下执行即可
</script>

　　

以上是通过css属性zoom来缩放页面，设计稿宽度为640(以下设计稿尺寸都为640)，所以这样的好处就是直接按照原来设计稿的尺寸用px来写css，不过这个显然不够高大上，页面有时会不清晰，但是通过和%的配合也可以快速的构建你的h5页面

css3的scale方式：

此方式bug众多，不适合新手，也不适合老司机，所以 略略略

2.温柔小巧型

meta-viewport-scale方式：

通过比例来对initial-scale等属性进行重置，少部分浏览器不识别重置

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"><!--必须,放在head标签中-->
<script>
var _SCALE_ = 1;
    _SCALE_ = function (){
    var deviceWidth = document.documentElement.clientWidth,
    scale = deviceWidth / 640;
    scale = scale > 1 ? 1 : scale;
    var metaEl = document.querySelector(‘meta[name="viewport"]‘);
    metaEl.setAttribute(‘content‘, ‘width=640,initial-scale=‘ + scale + ‘,maximum-scale=‘ + scale + ‘, minimum-scale=‘ + scale + ‘,user-scalable=no‘);
    return scale;
}();
</script>

　　

这种方式和zoom的方式类似也是采用缩放，css也是按照原始设计稿来写,也能解决1px的问题，暂时没有发现什么问题,也许会有不清晰的现象,如果有同学在使用这种方法的时候遇到问题请及时告诉我,赶紧填坑

3.高端时尚型

这是个高清适配的方法,除了重置meta失效的浏览器

dpr，rem，meta

var dpr, rem, scale;
        var docEl = document.documentElement;
        var fontEl = document.createElement(‘style‘);
        var metaEl = document.querySelector(‘meta[name="viewport"]‘);
        dpr = window.devicePixelRatio || 1;
        rem = docEl.clientWidth * dpr / 10;
        scale = 1 / dpr;
        // 设置viewport，进行缩放，达到高清效果
        metaEl.setAttribute(‘content‘, ‘width=‘ + dpr * docEl.clientWidth + ‘,initial-scale=‘ + scale + ‘,maximum-scale=‘ + scale + ‘, minimum-scale=‘ + scale + ‘,user-scalable=no‘);
        // 设置data-dpr属性，留作的css hack之用
        docEl.setAttribute(‘data-dpr‘, dpr);
        // 动态写入样式
        docEl.firstElementChild.appendChild(fontEl);
        fontEl.innerHTML = ‘html{font-size:‘ + rem + ‘px!important;}‘;
        // 给js调用的，某一dpr下rem和px之间的转换函数
        window.rem2px = function(v) {
            v = parseFloat(v);
            return v * rem;
        };
        window.px2rem = function(v) {
            v = parseFloat(v);
            return v / rem;
        };
        window.dpr = dpr;
        window.rem = rem;

　　然后为了方便我们可以采用less或者sass、scss来对我们的css样式进行管理，这里简单的介绍less

.px2rem(@name, @px){
    @{name}: @px / 64 * 1rem;
}
.px2px(@name, @px){
    @{name}: round(@px / 2) * 1px;
  [data-dpr="2"] & {
      @{name}: @px * 1px;
  }
  // for mx3
  [data-dpr="2.5"] & {
      @{name}: round(@px * 2.5 / 2) * 1px;
  }
  // for 小米note
  [data-dpr="2.75"] & {
      @{name}: round(@px * 2.75 / 2) * 1px;
  }
  [data-dpr="3"] & {
      @{name}: round(@px / 2 * 3) * 1px
  }
  // for 三星note4
  [data-dpr="4"] & {
      @{name}: @px * 2px;
  }
}
/*简单的圆角半径*/
.border-radius (@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}
/*四角的半径定制*/
.border-radius-custom (@topleft: 5px, @topright: 5px, @bottomleft: 5px, @bottomright: 5px) {
  -webkit-border-radius: @topleft @topright @bottomright @bottomleft;
  -moz-border-radius: @topleft @topright @bottomright @bottomleft;
  border-radius: @topleft @topright @bottomright @bottomleft;
}
/*方块阴影 Box Shadow*/
.box-shadow (@x: 0px, @y: 3px, @blur: 5px, @alpha: 0.5) {
  -webkit-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
  -moz-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
  box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
}
/*元素过渡效果 Transition*/
.transition (@prop: all, @time: 1s, @ease: linear) {
  -webkit-transition: @prop @time @ease;
  -moz-transition: @prop @time @ease;
  -ms-transition: @prop @time @ease;
  transition: @prop @time @ease;
}
/*转换/旋转 Transform*/
.transform (@rotate: 90deg, @scale: 1, @skew: 1deg, @translate: 10px) {
  -webkit-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
  -moz-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
  -ms-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
  transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
}
/*线性渐变*/
.gradient (@origin: left, @start: #ffffff, @stop: #000000) {
  background-color: @start;
  background-image: -webkit-linear-gradient(@origin, @start, @stop);
  background-image: -moz-linear-gradient(@origin, @start, @stop);
  background-image: -ms-linear-gradient(@origin, @start, @stop);
  background-image: linear-gradient(@origin, @start, @stop);
}
/*快速渐变*/
.quick-gradient (@origin: left, @alpha: 0.2) {
  background-image: -webkit-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
  background-image: -moz-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
  background-image: -ms-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
  background-image: linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
}
/*镜像效果*/
.reflect (@length: 50%, @opacity: 0.2){
  -webkit-box-reflect: below 0px
  -webkit-gradient(linear, left top, left bottom, from(transparent),
          color-stop(@length, transparent), to(rgba(255,255,255,@opacity)));
}

　　

这里写了一些css3的效果备用

less是不被浏览器识别的所以我们要编译它，一种是用在线的js编译，这种要多加载一条js；建议用程序来编译less，例如使用npm包中的less来编译;或者用构建工具gulp或者包管理工具webpack来编译，有时间可以分享给大家我的几个项目的源码;再或者在css中直接写px然后利用npm包中的px2rem来直接编译成rem,然后引用编译好的即可;其实上面的less中的前缀是可以省略的，然后用npm包中的autoprefixer来自动生成即可

4.css型

%
这个就不多说了，就是需要计算和设计稿宽度的比和高度比，注意的是：padding，margin的百分比计算是根据宽度的，这点要很注意
vw&vh
这个是忘记了是css3新出来的还是以前就有了，这个类似%，但是他的父级是屏幕，即vw对应屏幕宽度，vh对应高度，整个屏幕的大小是100vw*100vh

5.自由发挥型

下面说一个我最常用的方式：
rem，vw&vh，%,flex

var dpr, rem, scale;
   var docEl = document.documentElement;
   var fontEl = document.createElement(‘style‘);
   scale = docEl.clientWidth / 640;
   scale = scale>1?1:scale;
   rem = 64;
   rem = rem*scale;
   // 动态写入样式
   docEl.firstElementChild.appendChild(fontEl);
   fontEl.innerHTML = ‘html,body{font-size:‘ + rem + ‘px!important;}‘;

　　

动态的设置根的字体大小

css中rem的处理方式还是同第三种的解决方式

这种方法兼容性比较好，移动端基本都ok了;有的时候设计出来的设计稿可能，略微的长一些，这时候我们在布局上就要用上%和vh,flex,图片要设置高度宽自动,这种方法真的要随机应变了，但是这种方法也是对于观看者最友好的，能最大程度的不因可视区域的变小而影响观看

时间： 2024-10-19 18:08:47

移动端适配方法合集的相关文章

【开发者福利】最全面的移动端免费素材合集

在移动端设计风起云涌的今天,移动端的UI和UX设计师任重而道远.巧妇难为无米之炊,好素材就是设计师的底气.这次搜集的移动端免费素材覆盖全面,从教学资源到UI Kit,从开发工具到图标合集,一应俱全. 学习资源 UX Design for Mobile Developers 移动端开发的用户体验设计是Udacity所推出的课程,教授移动端应用开发用户体验设计的技术和案例,主要是针对移动端开发者,提高他们对于设计和用户体验的知识和意识,让他们开发的APP兼具好功能和好体验,不过编程开发的体验设计并不

移动端踩坑合集

前段时间在小密圈和大家分享我的感受,H5代替客户端进行移动端开发,是大趋势.未来较长一段时间,是混合应用的天下.然而H5写移动页面,那绝对是一步一个坑的节奏啊,做好各设备的兼容将是各前端er的重要使命.今天给大家送上一个合集,是我最近开发中遇到的一些坑,作个记录,也给大家一些经验. 1. babel-polyfill老实加上.现在很多项目都用ES6在写了,ES6在移动端的兼容也天生较好.有些同学嫌弃polyfill文件太大(压缩后也将近100KB)就不引了,反正用到的方法也不多. 然而最近发现项

移动端适配方法

做移动端项目发现最大的问题是适配问题,总结一下比较好用的适配方法: 首先:丢掉px吧,使用rem,浏览器的默认字体高都是16px因为100%=16px,1px=6.25%,所以10px=62.5%, rem是只相对于根元素htm的font-size,即只需要设置根元素html的font-size,其它元素或者字体都使用rem为单位设置成相应的百分比即可: 例子: 1 html{font-size:62.5%;} 2 body{font-size:1.2rem ;} (12px) 3 p{font

Vs2015 win10虚拟机启动问题：无法设置UDP端口 解决方法 合集（转载）

刚装的vs2015 社区版 出现这个问题,wp8.1和win10m模拟器都无法启动,找了好久找到的解决方案,放这儿供大家参考,免得大家像我一样走弯路: Windows Phone emulator not starting (couldn`t setup the UDP port) After updating Windows 10 to build 10061 windows phone emulators (all 8.1 and 10) stopped starting. I get th

Unity3D 角色(物体) 移动方法 合集

1. 简介 在Unity3D中,有多种方式可以改变物体的坐标,实现移动的目的,其本质是每帧修改物体的position. 2. 通过Transform组件移动物体 Transform 组件用于描述物体在空间中的状态,它包括 位置(position), 旋转(rotation)和 缩放(scale). 其实所有的移动都会导致position的改变,这里所说的通过Transform组件来移动物体,指的是直接操作Transform来控制物体的位置(position). 2.1 Transform.Tra

Android中解析JSON格式数据常见方法合集

待解析的JSON格式的文件如下: [{"id":"5", "version":"1.0", "name":"xiaowang"}, {"id":"10", "version":"2.0", "name":"lisi"}] 一.使用JSONObject来解析JSON数据

优秀的基于VUE移动端UI框架合集

1. vonic 一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用,很简约,是我喜欢的风格 star 2.3k 中文文档 在线预览 2.vux 基于WeUI和Vue(2.x)开发的移动端UI组件库 star 10k 基于webpack+vue-loader+vux可以快速开发移动端页面,配合vux-loader方便你在WeUI的基础上定制需要的样式. 中文文档 在线预览 3.Mint UI 由饿了么前端团队推出的 Mint UI 是一个基于 Vue.js 的

菜鸟的Xamarin.Forms前行之路——各种报错问题解决方法合集(不定时更新)

2017-08-24 1序列不包含任何元素 这个是布局方面的问题,请检查布局是否出现问题 2一个或多个项目目标不支持生成操作"EmbeddedResource" 换成管理员方式打开VS 3错误与XamalcTask或xamlFilePathAttribute有关 重新以管理员方式打开vs或者检查Xaml.Forms的Nuget包是否有更新,更新即可 [email protected](content) build action is supported 修改安卓项目的Androidma

不能错过的js方法合集

var h = {};      h.get = function (url, data, ok, error) {          $.ajax({              url: url,              data: data,              dataType: 'json',              success: ok,              error: error          });      }      h.post = function