1.rem

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>Document</title>

    <style>

        html{

            font-size: 20px;      //设置1rem代表的大小，一般选用20比较好计算

        }

        body{

            margin:0;

            overflow: hidden;

        }

    </style>

</head>

<body>

    <script>

        (function (doc, win){

            var html = doc.documentElement,

            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',  //手机横屏，竖屏可在此处设置

            recalc = function(){

                var clientWidth = html.clientWidth;

                if (!clientWidth) return;

                docE1.style.fontSize = 20*(clientWidth/320) + 'px';    //以iphone4屏幕为基准

            };

            if (!doc.addEventListener) return;

            win.addEventListener('DOMContentLoaded', recalc, false);  //$(window).on('resize',function(){})

        })(document, window);

    </script>

</body>

</html>

上述代码，便是屏幕适配的整个框架，可以适用手机，平板，电脑。

可以在其中写入自己的代码，以rem为单位（此代码1rem=20px）；

有缩放效果，以px为单位，是绝对值，不会随着屏幕大小的改变，而改变；

以百分比为单位，注意将标签的所有父元素都已百分比为单位，同样有缩放效果；

2.从css角度考虑

<meta charset="UTF-8">

    <title>Document</title>

    <style>

        html,body{

            margin:0;

            padding:0;

        }

       .wp{ 
　　　　　　　width:800px; 
　　　　　　 }

        @media screen and (min-width: 1000px){

        }

        @media screen and (min-width: 640px) and (max-width:999px){

            .wp{

                width:800px;

            }

        }

        @media screen and (max-width:639px){

            .wp{ 
　　　　　　　　　 width:800px; 

　　　　　　　　　}

        }

    </style>

</head>

<body>

    <div class="wp">

    </div>

</body>

</html>

上述代码中一个@media代表一种屏幕大小，相当于js中的一个if语句，然后将在不同屏幕下显示的样式分别写进自己的@media中，这种情况代码量比较大，屏幕中类也挺多的

h5移动端屏幕适配的更多相关文章

  1. 移动 web 端屏幕适配 - rem

    前言 最近整理了一下以前学习前端的笔记,发现自己对移动 web 端屏幕适配(rem)这一块并没有真正理解,只是会用.接下来,把自己的一些对移动 web 端屏幕适配(rem)的思考记录下来. rem 介 ...

  2. Web 端屏幕适配方案

    基础知识 像素相关 1.像素 :像素是屏幕显示最小的单位. 2.设备像素 :设备像素又称物理像素(physical pixel),设备能控制显示的最小单位,我们可以把这些像素看作成显示器上一个个的点. ...

  3. 移动端屏幕适配(rem+js）

    什么是移动端适配 在制作webapp时,一个很关键的问题就是适配各种机型不同屏幕的大小,让每种机型上的布局看起来都尽量一样. 也就是说用同一套代码在不同分辨率的手机上跑时,页面元素间的间距.留白,以及 ...

  4. Flutter 移动端屏幕适配方案和制作

    flutter_screenutil插件 flutter 屏幕适配方案,让你的UI在不同尺寸的屏幕上都能显示合理的布局! 注意:此插件仍处于开发阶段,某些API可能尚未推出. 安装依赖: 安装之前请查 ...

  5. vue移动端h5页面根据屏幕适配的四种方案

    最近做了两个关于h5页面对接公众号的项目,不得不提打开微信浏览器内置地图导航的功能确实有点恶心.下次想起来了的话,进行总结分享一下如何处理.在vue移动端h5页面当中,其中适配是经常会遇到的问题,这块 ...

  6. H5移动端rem适配

    /** * 移动端自适应 */ <meta name="viewport" content="width=device-width,user-scalable=no ...

  7. vue 移动端屏幕适配 使用rem

    要想移动端适配 并使用 rem  您需要先看这篇文章,配置好less ➡️ 在vue 中使用 less,就可以使用rem了 如果项目已经开发的差不多了,没有用到rem 又要使用rem,您用这招. po ...

  8. vue 移动端屏幕适配

    https://github.com/evrone/postcss-px-to-viewport/blob/master/README_CN.md基本配置 // eslint-disable-next ...

  9. 移动端font-size适配方案

    概述 这是我研究移动端页面时的思考,记录下来供以后开发时参考,相信对其他人也有用.由于我写移动端页面写的还比较少,一些问题都还没遇到,所以我的这篇博文不免有些错误的地方,还请大佬多多指正. 这篇文章是 ...

随机推荐

  1. 数据库 事务的特性ACID

    数据库 事务的特性ACID 事务(Transaction)是并发控制的基本单位. 所谓事务,它是一个操作序列,这些操作要么都执行,要么都不执行,它是一个不可分割的工作单位.例如,银行转帐工作:从一个帐 ...

  2. DataTable复制数据,深度复制

    /**/ /// <summary> /// 复制数据,深度复制 /// </summary> /// <param name="dataSourceRow&q ...

  3. 芝麻HTTP:Python爬虫实战之爬取百度贴吧帖子

    本篇目标 1.对百度贴吧的任意帖子进行抓取 2.指定是否只抓取楼主发帖内容 3.将抓取到的内容分析并保存到文件 1.URL格式的确定 首先,我们先观察一下百度贴吧的任意一个帖子. 比如:http:// ...

  4. Html行内元素和块级元素

    1.关于行内元素和块状元素的说明 根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display ...

  5. 【Uoj34】多项式乘法（NTT，FFT）

    [Uoj34]多项式乘法(NTT,FFT) 题面 uoj 题解 首先多项式乘法用\(FFT\)是一个很久很久以前就写过的东西 直接贴一下代码吧.. #include<iostream> # ...

  6. 【BZOJ2816】【ZJOI2012】网络（Link-Cut Tree）

    [BZOJ2816][ZJOI2012]网络(Link-Cut Tree) 题面 题目描述 有一个无向图G,每个点有个权值,每条边有一个颜色.这个无向图满足以下两个条件: 对于任意节点连出去的边中,相 ...

  7. Python中的栈溢出及解决办法

    1.递归函数 在函数内部,可以调用其他函数.如果一个函数在内部调用自身本身,这个函数就是递归函数. 举个例子,我们来计算阶乘n! = 1 x 2 x 3 x ... x n,用函数fact(n)表示, ...

  8. Sqoop工具

    简介 SQOOP是用于对数据进行导入导出的. (1)把MySQL.Oracle等数据库中的数据导入到HDFS.Hive.HBase中 (2)把HDFS.Hive.HBase中的数据导出到MySQL.O ...

  9. ATM+购物商城完整版

    一,需求:模拟实现一个ATM + 购物商城程序 要求如下: 1.额度15000或者自定义 2.实现购物商城,买东西加入购物车,调用信用卡接口结账 3.可以提现,手续费5% 4.支持多账户登陆 5.支持 ...

  10. 基于python语言的签名算法

    在wiki上看完接口文档根据传入的参数来查看返回的测试结果,测试结果提示缺少参数,找开发小伙伴沟通,原来发现缺少公共参数.找开发拿到公共参数的接口文档,发现里面传入的参数包含时间戳和签名. 时间戳:姑 ...