rem设计方案

原理和思路

一套代码一个布局适应所有移动端

<meta name = "viewport" content = "width=device-width, initial-scale = 1.0,minimum-scale = 1.0,maximum-scale = 1.0,user-scalable = no">
//user-scalable = no 禁止用户手指头放大缩小

以一个简单iPhoneX移动端界面为例

下面是需要注意的几点

1.以最大像素为基础，720px，那么所有移动端屏幕都可以适用
2.整体布局默认不设置宽度，默认100%自动填满
3.父元素一般不设置高度，由子元素撑起来
4.移动端不考虑放大，考虑缩小
5.图片只设置width:100%,其余不用设置，自适应盒子的大小
6.文字依然以rem为单位，等比例的放大，缩小
html的font-size 设置为整数，比较好计算例如：50px 100px

7.所有的布局均使用flex布局来用,不再使用width百分比，float布局了

下面是一段用来配合rem做移动端适配的js函数代码

    // 立即执行函数
    // 做移动端适配 配合rem
    // 找到最大尺寸720px
    // 当大于720px html的font-size设置为100px 几乎兼容所有的大显示器。
    // 考虑问题，屏幕缩小的时候，让HTML的fon-size是一个动态的值，并且与视图窗口大小有关，这样就实现了响应式。
     (function (window, document) {
    //   因为UI标准的设计稿标准的一倍图以375px为标准，为了找到规律，尽可能小的误差，所以就写 viewWidth = 750px
      var viewWidth = 750;
      var pick = viewWidth / 100;
      var mode = "resize";
      function change() {
        var view = document.documentElement.clientWidth || window.innerWidth;
    // 如果视图窗口宽度大于720px
        if (view >= 750) {
          document.getElementsByTagName("html")[0].style.fontSize = 100 + "px";
          return;
        }
    // 否则设置html的font-size为动态的值 = 视图窗口宽度 / 100px
        document.getElementsByTagName("html")[0].style.fontSize =
          view / pick + "px";
      }
      window.addEventListener(mode, change, !1);
      window.document.addEventListener("DOMContentLoaded", change, !1);
    })(window, document);
    </script>============

rem移动端设计方案相关推荐

rem移动端布局怎么适配IOS和Android
rem移动端布局怎么适配IOS和Android 昨天"佬大"问我做的h5页面在ios上面显示正常,但是Android就变惨不忍睹了,于是我又开始了度量之路,几个小时过去了.... ...
关于rem移动端 html字体大小自适应设置的问题
rem是个单位,单位大小由它第一代祖先font-size的大小决定rem的大小. 了解字体大小的同时我们要知道像素是什么东西. 像素是屏幕的组成元素,我们看到屏幕上的内容都是由一个个小颗粒构成的,而这 ...
vue rem移动端适配
参考:https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html 首先先弄清楚几个基本的原理知识: 物理像素:又称设备像素,是显 ...
卡牌手机游戏基于HTTP协议的服务端设计方案
背景: 手机游戏平台服务端设计目前主要有基于Socket的状态连接和HTTP无状态连接两种架构.由于手机用户对于网络流量的敏感和网络状态的变化要比PC环境要复杂,因而对于卡牌类游戏基本采用HTTP连接 ...
vue项目配置rem移动端适配
一.项目介绍脚手架CLI:@vue/cli Vue版本:2.6.11 移动UI组件库:Vant#2.10.14 CSS预处理器:sass 二.配置lib-flexible插件下载插件 npm i ...
移动端适配+flexible.js+rem适配
移动端适配前沿: 移动端web页面的开发,由于手机屏幕尺寸.分辨率不同,或者需要考虑横竖屏问题,为了使得web页面在不同移动设备上具有相适应的展示效果,需要在开发过程中使用合理的适配方案来解决这个问 ...
小案例：实现http://www.alloyteam.com/page/0/移动端效果，博客文章列表和文章详情页面
一:案例要求和数据: (1)移动端适配 (2)列表跳详情 (3)回到顶部 (4)上下页 (5)时间格式 (6)解决接口跨域请求访问问题 (7)路由跳转无bug 接口路径均以 http://118.19 ...
css自动转rem,css之px自动转rem—“懒人”必备
作为一名前端开发,尤其是在做移动端适配时,rem是我们经常用到的单位,它的好处大家可以自行搜索,网上已经有很多了. 但是我们再将设计稿上的px转换成rem时,得手动的去计算,这是一个很耗时.费力的过程 ...
将已写好页面的px转化为rem（px to rem）
将已写好页面的px转化为rem(px to rem) 1.px/rem单位 px:pixel的缩写,像素的意思 rem : 是一个相对单位,1rem等于根元素的font-size值 2.为什么要实现p ...
vue+vant搭建移动端框架
主要内容 1.vant/rem移动端适配的解决方案 2. vue/cli二次配置及优化处理 3.基于注册动态模式实现loading 4.掌握vuex永久化存储 1 创建一个vue项目 1.1安装vue ...

rem移动端设计方案

rem设计方案

原理和思路

一套代码一个布局适应所有移动端

以一个简单iPhoneX移动端界面为例

下面是需要注意的几点

下面是一段用来配合rem做移动端适配的js函数代码

rem移动端设计方案相关推荐

最新文章

热门文章

rem移动端设计方案

rem设计方案

原理和思路

一套代码 一个布局适应所有移动端

以一个简单iPhoneX移动端界面为例

下面是需要注意的几点

下面是一段用来配合rem做移动端适配的js函数代码

rem移动端设计方案相关推荐

最新文章

热门文章

一套代码一个布局适应所有移动端