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. Java中的List转换成JSON报错（二）

    1.错误描述 Exception in thread "main" java.lang.NoClassDefFoundError: org/apache/commons/loggi ...

  2. directshow filter中添加属性页

    directShow 属性页的制作,为CBall filter加了一个属性页 具体为分以下步骤: 1.在要显示属性的类中继承现ISpecifyPropertyPages类,并实现此类的GetPages ...

  3. ArgumentError：Error #2004:某个参数无效

    1.错误描述 ArgumentError:Error #2004:某个参数无效 at flash display::Graphics/drawRect() at ZeroClipboard() 2.错 ...

  4. OWA 无法连接到Exchange

    Outlook WebAccess中无法连接到Microsoft Exchange.如果问题仍然存在,请联系您的组织的技术支持. 1.   在Exchange邮件服务器,收件人配置--邮箱--右击用户 ...

  5. 过滤文件代码 python

    import os import cv2 import shutil # store all file in directory global totalFileList totalFileList ...

  6. docker学习系列（一）：docker 基础

    一.简介 开发当中比较麻烦的问题在于软件配置,每个人的机械以及系统都不尽相同,程序需要运行在系统当中需要配置好相应的系统以及各种依赖的组件,但是很多时候由于各种软件依赖包的版本,系统兼容性问题会导致程 ...

  7. sql数据库设置自定义消息

    第一步 EXEC sp_addmessage   @msgnum =   50005 ,   @severity =   10 ,   @msgtext =   '更新失败'        ,  @l ...

  8. [CF940F]Machine Learning

    codeforces 一句话题意 求区间数字出现次数的mex,带修改 sol 带修膜队不解释 带修膜队的排序! struct query{ int id,l,r,t; bool operator &l ...

  9. [Luogu3527][POI2011]MET-Meteors

    BZOJ权限题!提供洛谷链接! sol 昨晚突发奇想去学了一下整体二分. 这道题应该算是整体二分的板子题吧. 整体二分 首先要求可离线,不然还是安心码数据结构吧. 整体二分简单的来讲,就是时间复杂度可 ...

  10. Luogu2973：[USACO10HOL]赶小猪

    题面 Luogu Sol 设\(f[i]\)表示炸弹到\(i\)不爆炸的期望 高斯消元即可 另外,题目中的概率\(p/q\)实际上为\(1-p/q\) 还有,谁能告诉我不加\(EPS\),为什么会输出 ...