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. Caused by: The Result type [json] which is defined in the Result annotation on the class

    1.错误描述 严重: Dispatcher initialization failed Unable to load configuration. - [unknown location] at co ...

  2. 下拉框的change事件

    6.1,获取下拉框的值(html标签中没有onchange事件的) <script language="javascript"> $(document).ready(f ...

  3. Python 学习笔记（二）开发环境的搭建

    安装Python windows 下安装: 下载地址:https://www.python.org/downloads Python的版本 3.x 是趋势 2.x 还在被大量使用 至于使用2.x 还是 ...

  4. Bzoj4872: [Shoi2017]分手是祝愿

    题面 Bzoj Sol 首先从大向小,能关就关显然是最优 然后 设\(f[i]\)表示剩下最优要按i个开关的期望步数,倒推过来就是 \[ f[i]=f[i-1]*i*inv[n]+f[i+1]*(n- ...

  5. less-more使用方法及区别

    Less按屏(空格,page up/page down)或按行(回车)查看文件 Less按屏(空格)或按行(回车)查看文件(不能向上翻)

  6. Python魔法方法（转发整合）

    如果你的对象实现(重载)了这些方法中的某一个,那么这个方法就会在特殊的情况下被 Python 所调用,你可以定义自己想要的行为,而这一切都是自动发生的. __new__: 是一个对象实例化时调用的第一 ...

  7. 主库的wal日志已经被归档或异常丢失如何搭建从库

      关键字:wal日志归档  搭建从库 restore_command master 194.1 slave 194.4 wal归档目录 /backup/pgsql/pg_arch/ xlog目录 / ...

  8. wpf研究之道——自定义Button控件

    我们知道WPF中普通的按钮,长得丑,所以自定义按钮,在所难免.我们给按钮添加 MoveBrush,EnterBrush两把刷子,其实就是鼠标经过和鼠标按下的效果.只不过这不是普通的刷子,而是带图片的I ...

  9. Pluto - iOS 上一个高性能的排版渲染引擎

    WeTest 导读 Pluto 是 iOS 上的一个排版渲染引擎,通过 JSON/JS 文件可以很方便地描述界面元素,开发效率很高,并且在流畅度,内存等方便有保证.pluto.oa.com 上有更多详 ...

  10. lambda表达式Expression<Func<Person, bool>> 、Func<Person, bool>区别

    前言: 自己通过lambda表达式的封装,将对应的表达式转成字符串的过程中,对lambda表达式有了新的认识 原因: 很多开发者对lambda表达式Expression<Func<Pers ...