手机端自适应处理

//css

html{

font-size:10px;

}

元素{

font-size:1.2rem;

}

//js

(function (doc, win) {
  var docEl = doc.documentElement,
  resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘,
  recalc = function () {
    var clientWidth = docEl.clientWidth;
    if (!clientWidth) return;
    docEl.style.fontSize = 10 * (clientWidth / 320) + ‘px‘;
  };

  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener(‘DOMContentLoaded‘, recalc, false);
})(document, window);

时间: 2024-11-10 17:34:06

手机端自适应处理的相关文章

编写手机端自适应页面案例,springMVC代码,SpringMVC上传代码,去掉input框中原有的样式,使ios按钮没有圆角,css中的border-radius类似

1.编写的页面 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE html PUBLIC "-//

0512日重点:淘宝的H5手机端自适应解决方案:Flexible

参考文档: https://github.com/amfe/lib-flexible https://github.com/amfe/article/issues/17 自我总结:Flexible自动获取到手机的屏幕宽度,然后分成10份,1个rem=1/10屏幕宽度.然后所有的px转换成rem. 转换时有插件可以帮忙快速转换.

手机端自适应缩放显示 js

<script> var _width = parseInt(window.screen.width); var scale = _width/640; var ua = navigator.userAgent.toLowerCase(); var result = /android (\d+\.\d+)/.exec(ua); if (result){ var version = parseFloat(result[1]); if(version>2.3){ document.write

Salesforce 自定义页面并实现手机端自适应

一.使用salesforce实现自定义的"任务签到"页面,实现了百度地图地位功能 1)首先必须创建一个自定义页面 2)创建salesforece对象 3)创建控制器 4)进入页面写代码 二.代码实现 前台页面代码 <apex:page showHeader="false" sidebar="false" standardStylesheets="false" showQuickActionVfHeader="f

手机端自适应布局demo

原型如下: 要求如下:适应各种机型 源码如下: <!DOCTYPE html ><html> <head>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />        <meta name="viewport" content="width=device-width, init

手机端自适应

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

手机端自适应显示样式设置(两种方式)

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="X-UA-Compatible" co

Erdaicms旅游网站系统微信和手机端分销系统正式上线发布啦

为了便于营销,Erdaicms特别内置了2级分销系统,每个分销商都可以拥有自己的网店,销售订单获得提成,分销商网店和平台数据实时互通.无需国外的设置和维护,专注于销售. 详细请仔细阅读研究下面的分销商流程和说明图: 重要知识点: 一.分销商账户通过那几种途径获得?1.管理员直接从平台后台开设全新的账户.2.管理员从平台后台中,选取已经存在的普通会员账户,提升权限为分销商.3.直接从前台专门的注册页面注册,管理员后台审核. 二.分销商的店铺产品数据从哪里来1.分销商的店铺相当于直接把平台的移动站复

手机端Html自适应屏幕大小

需要在html<head><meta name="viewport"          content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> </head>  加入 手机端Html自适应屏幕大小,布布扣,bubuko.com