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. 芝麻HTTP：Flask的安装

    Flask是一个轻量级的Web服务程序,它简单.易用.灵活,这里主要用来做一些API服务. 1. 相关链接 GitHub:https://github.com/pallets/flask 官方文档:h ...

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

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

  3. SDK、JDK、JRE、ADB、AVD到底都是啥？

    SDK:Software Development Kit,软件开发工具包是一些被软件工程师用于为特定的软件包.软件框架.硬件平台.操作系统等创建应用软件的开发工具的集合,一般而言SDK即开发 Wind ...

  4. 决策树系列（五）——CART

    CART,又名分类回归树,是在ID3的基础上进行优化的决策树,学习CART记住以下几个关键点: (1)CART既能是分类树,又能是分类树: (2)当CART是分类树时,采用GINI值作为节点分裂的依据 ...

  5. Linux之批量挂载硬盘

    ############parted工具分区############### #!/bin/bash #shell脚本开头格式PATH=/bin:/sbin:/usr/bin:/usr/sbin #保证 ...

  6. [BZOJ1609] [Usaco2008 Feb] Eating Together麻烦的聚餐 (dp)

    Description 为了避免餐厅过分拥挤,FJ要求奶牛们分3批就餐.每天晚饭前,奶牛们都会在餐厅前排队入内,按FJ的设想所有第3批就餐的奶牛排在队尾,队伍的前端由设定为第1批就餐的奶牛占据,中间的 ...

  7. Js - JQ事件委托( 适用于给动态生成的脚本元素添加事件）

    最近一段时间打了一个大仗,现在总算消停点,才有时间来做个总结吧算是: 移动端遇到一个项目,是一个列表的侧滑栏,在我这里用jq写的交互事件.自测各方面都挺好的,美滋滋的给了研发.研发也美滋滋的开始开发. ...

  8. 谷歌chrome 插件（扩展）开发——进阶篇（c#本地程序和插件交互）下

    在上一篇中,我提出了总任务.接下来去实现. 获取网页内容等其它信息,这是content.js 擅长做的事情: chrome.extension.onMessage.addListener( funct ...

  9. Java过滤XSS脚本, 可通过Appscan扫描

    项目中有时会需要把一些报错或者解决方案直接返回给前端, 如果直接返回原字符串, 可能会被恶意传参来实现xss注入. 例如常规业务访问一个页面读取文件&file=sdf.cpt, 如果文件不存在 ...

  10. 自动化之路 Graphite监控上手指南

    自动化运维怎能少了监控,推荐Graphite监控,下面是配置地址 http://www.infoq.com/cn/articles/graphite-intro/ Graphite官网 http:// ...