手机端自适应

<!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" content="ie=edge">

<title>Document</title>

</head>

<style>

/* 750物理像素除以100等于7.5 算出一个物理像素 vw是是手机视口像素 把他分成100份 1个物理像素vw等于两个逻辑像素 7.5除以2等于3.75px 然后在然后100px除以1个逻辑像素3.75 所以等于26.67vw 相当于100px

vw就像%号一样会自己计算

*/

html{

font-size:26.67vw;

}

html,body{

margin:0;padding:0;

width:100%;

height:100%;

}

div{

height:0.64rem;

background:black;

}

</style>

<body>

<div>

</div>

<script>

console.log(window.resize)

</script>

</body>

</html>

原文地址:https://www.cnblogs.com/wang-z-z/p/8489684.html

时间: 2024-08-02 17:21:23

手机端自适应的相关文章

编写手机端自适应页面案例,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 "-//

手机端自适应处理

//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;

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" 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