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. Flex和Servlet结合上传文件报错（一）

    1.具体错误如下 一个表单域 不是一个表单域 java.io.FileNotFoundException: D:\MyEclipse\workspace\FlexFileUpload\Web\null ...

  2. nest exception is java.sql.SQLException:ORA-01476:除数为0

    1.错误描述 nest exception is java.sql.SQLException:ORA-01476:除数为0 2.错误原因 3.解决办法

  3. faultString = "java.lang.NullPointerException : null"

    1.错误描述 (mx.messaging.messages::ErrorMessage)#0 body = (null) clientId = "E75F6AF8-5E0E-4184-3AF ...

  4. R语言-动画

    使用动画可以使得图形更形象,更能反映数据的变化 1.安装环境gganimate if(!require(devtools)) install.packages("devtools" ...

  5. OpenStack_I版 6.Neutron部署

    Neutron是不能自己创建网络的,它需要借助插件才能创建虚拟网桥.网卡 依赖插件 配置ml2为核心插件 本次网络模型采用扁平化网络,不同的网络类型不同的配置,不同的使用方法 打开安全组功能 Linu ...

  6. 什么是PostBack（译）

    什么是PostBack(译) What is a postback? 下面的内容是针对ASP.NET新手的 PostBack什么时候被引发? PostBack由客户端浏览器引发.通常是用户操作(点击按 ...

  7. Bzoj4817：[SDOI2017]树点涂色

    题面 Bzoj Sol 做个转化 最开始都是虚边 操作\(1\)就是\(LCT\)里的\(Access\)操作 求的就是路径上虚边的个数+1 然后就好办了 用树链剖分+线段树来维护每个点到根虚边的个数 ...

  8. HiHocoder1419 : 后缀数组四·重复旋律4&[SPOJ]REPEATS：Repeats

    题面 Hihocoder Vjudge Sol 题目的提示说的也非常好 我对求\(LCP(P - L + len \% l, P + len \% L)\)做补充 \(len=LCP(P, P + L ...

  9. Vue-自带vue-resource插件实现http请求

    安装 本地环境安装路由插件vue-resource:    cnpm install vue-resource --save-dev *没有安装淘宝镜像的可以将 cnpm 替换成 npm 想要安装的可 ...

  10. Get the Job You Want（大学英语综合教程4课文）

    UNIT3-1 Harvey Mackay, who runs his own company, often interviews applicants for jobs. Here he lets ...