做移动端自适应时可能很多人都对自适应和dpr之间的关系产生疑问,也有一些人会疑虑比如我的自适应方案没有加dpr会不会出问题,针对这些疑问我说一下我的见解. 1. 什么是尺寸自适应 首先标题说的自适应,可能自适应在不同人眼里理解不同,特别与响应式的关系,在这里说一下我所理解的自适应,和其与响应式的区别.先说响应式设计,响应式设计表示在不同的屏幕尺寸下,都有良好的布局和内容表现,简单一点的说,就是一个页面可以适配多种不同尺寸的屏幕,而且看上去还是设计良好的.为了实现这个目的,可能会利用js或者css…

一.利用lib-flexible.postcss-plugin-px2rem插件 进行移动端rem适配. 1.第一 引入lib-flexible . 安装lib-flexible: npm i lib-flexible --save-dev 在项目的入口main.js文件中引入lib-flexible: import 'lib-flexible', 在index.html中 是否 去掉meta name="viewport" 标签  要看框架具体情况,具体请看第四条, 2.第二 使用p…

前言 在移动端做自适应,我们常用的有媒体查询,rem ,em,宽度百分比这几种方案.但是都各有其缺点. 首先拿媒体查询来说,在某一个宽度区间内只能使用一种样式,为了适应不同屏幕要,css的代码量就会增多,并且后期页面如果有改动,会变得越来越不易维护.em得根据父元素的字体大小来计算宽高,有很大局限性.用百分比来设置宽度局限性也大,首先是得计算每个元素占父元素的宽度,而且只能设置宽度的百分比,而高度则很难通过百分比来设置.所以最后的希望寄托在了rem上. rem与px 在讲rem实现方案之前,我们…

其实H5适配的方案有很多种,网上有关于这方面的教程也非常的多. 不管哪种方法,都有其自己的优势和劣势. 为什么推荐使用Flexible库来做H5页面的终端设备适配呢?   原理  简单易懂  源码疑问 主要因为这个库在手淘已经使用了近一年,而且已达到了较为稳定的状态. 除此之外,你不需要考虑如何对元素进行折算,可以根据对应的视觉稿,直接切入. 该方案 会 自动根据你的屏幕大小配置好 根节点的 font-size 大小 另外会改变 initial-scale , 如果是3倍retina屏, 值变成…

对于移动端自适应各种终端的解决方案较多,本篇只是选择其中一种rem适配,我个人做移动端最喜欢的方案. rem就是以html根元素的字体大小为参考,比如html:font-size:20px;1rem=20px;2rem=40px.....,因为移动端的屏幕特殊之处,主要是不同类型手机像素比dpr的不同,所以不能直接使用px来进行设置元素的尺寸,这里就需要引入一个可以兼容各种尺寸的解决方案,rem便是很好的一个,而对于rem的设置,我们是通过javaScript动态来设置,通过获取设备屏幕的宽度来…

为什么要写这个 以前写过关于webapp自适应屏幕的文章(链接),不过写的大多数群众看不懂,所以来个图文并茂的版本.虽然只是一个简单的页面,不过在做的过程中也遇到了一些问题,也算是好事吧! 该示例github地址:https://github.com/iwangx/WebApp 访问地址:https://csssprite.herokuapp.com/ 准备 psd:这个是最重要的东西,用于测量尺寸,以及切图,我是不太同意切图的工作交给ui,自己切比较好,psd的分辨率我做的是640px的宽度,…

自从进入新公司之后,就一直采用800的方案,也就是判断屏幕尺寸,大于800px是一种html字体处理方案,另一种方案是小于800px的html字体处理方案, 代码如下: (function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { var clientWi…

一般设计师给我们的设计稿尺寸都为750*1340 .. 网易,淘宝移动端首页上html元素的font-size 目前就先说一下网易的做法 引入下面这段js,用于计算动态的font-size (function(doc, win) { var docEl = doc.documentElement, isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), dpr = isIOS ? Math.min(win.devic…

首先介绍一下概念 devicePixelRatio其实指的是window.devicePixelRatio window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例. 公式表示就是:window.devicePixelRatio = 物理像素 / dips 好了,到了这里有出来了两个概念,物理像素 和  dips 物理像素,比较好理解,一个物理像素是显示器(手机屏幕)上最小的物理显示单元,在操作系统的调…

代码有更新,最好直接查看github github:https://github.com/finance-sh/adaptive adaptivejs利用rem解决移动端页面开发的自适应问题 页面模板初始化的时候不用设置viewport标签,由js生成. 我们在head标签的顶部引入js,按以下方法使用即可 使用方法: 在页面head写入以下代码,实时更新html的fontsize: <script src="js/adaptive.js"></script>…

UITableView 我们都知道UITableView从iOS 8开始实现行高的自适应相对比较简单,首先必须设置estimatedRowHeight给出预估高度,设置rowHeight为UITableViewAutomaticDimension(注意:如果不修改rowHeight默认就是UITableViewAutomaticDimension),对于这两个参数除了直接修改tableview对应的属性之外仍然支持使用对应的代理方法设置.最后只要在UITableViewCell中设置conten…

UITableView 我们都知道UITableView从iOS 8开始实现行高的自适应相对比较简单,首先必须设置estimatedRowHeight给出预估高度,设置rowHeight为UITableViewAutomaticDimension(注意:如果不修改rowHeight默认就是UITableViewAutomaticDimension),对于这两个参数除了直接修改tableview对应的属性之外仍然支持使用对应的代理方法设置.最后只要在UITableViewCell中设置conten…

rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我对rem综合评价是用来做web app它绝对是最合适的人选之一. rem是什么? rem(font size of the root element)是指相对于根元素的字体大小的单位.简单的说它就是一个相对单位.看到rem大家一定会想起em单位,em(font size of the element)是指相对于父元素的字体大小的单位.它们之间其实很相似,只不过一…

本文系个人理解,可能有误差,仅供参考,谨慎采纳! 布局视口: 系统自带 一般大于屏幕宽度 理想宽度:  设置页面的viewport 的一个宽度,使不同的手机的布局视口宽度尽量接近可视窗口的值: 可视视口:即屏幕宽度 第一种情况:不显示地设置viewport:  若代码中网页宽度小于设备默认值 按 默认,大于设备默认则viewport的宽度变为网页的最大值. 那么width的默认为手机厂商自定义的 布局视口layout viewport  宽度有980 1024等等,如: 手机宽度为980, 1)…

在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport,通读网上的各种对于viewport的解释之后 大概viewport可以理解为三种 1.layout viewport ,也就是这个浏览器默认的viewport 2.visual viewport  , 浏览器可视区域viewport 3. ideal viewport  ,移动设备的理想viewport 通俗点讲,pc端css中的1px并不会等于移动端,原理很简单,举个例子说 通过chrome浏览器可以知道,一个I…

100%还原设计图,要注意: 看布局,分析结构. 感觉难点在于: 1.测量精度(ps测量数据): 2.文字的行高. 前段时间写个移动端适配的页面(刚接触这方面),查了一些资料,用以下方法能实现: 1.设置理想视口: 自动适应屏幕宽度 :网页的宽度默认等于屏幕的宽度 <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.…

define(function (require, exports, module) { exports.mobileUtilMethod = function () { (function (e, t) { function n() { for (var e = navigator.userAgent, t = ["Android", "iPhone", "SymbianOS", "Windows Phone", "…

之前对于横屏的webapp做过一些尝试,可是始终不是非常好的解决方式,前段时间又接触了类似的需求,尝试了感觉更好的解决方式. 之前的方法写的博客:移动网页横竖屏兼容适应的一些体会 这里举的样例还是平时常见的移动端的滑动页面,也就是上下切换页面的"H5". 首先要做的准备: 1.html布局 <div id="wrap"> <div class="pageWrap"> <div class="img11&qu…

在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport,通读网上的各种对于viewport的解释之后 大概viewport可以理解为三种 1.layout viewport ,也就是这个浏览器默认的viewport 2.visual viewport  , 浏览器可视区域viewport 3. ideal viewport  ,移动设备的理想viewport 通俗点讲,pc端css中的1px并不会等于移动端,原理很简单,举个例子说 通过chrome浏览器可以知道,一个I…

一. 安装插件(lib-flexible 和 postcss-loader.postcss-px2rem) npm i lib-flexible --save npm install postcss-loader postcss-px2rem --save 二. 配置插件 1. 在入口文件 main.js 中引入 lib-flexible  (如:  import Vue from 'vue' import App from './App' import router from './route…

前端开发框架Bootstrap  网址:http://www.dnzs.com.cn/w3cschool/bootstrap/bootstrap-tutorial.html 需要加入代码 <script src="../Public/js/jquery-1.11.2.min.js"></script> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css&q…

function resi() { var html = document.querySelector("html"); var wW = document.body.clientWidth || document.documentElement.clientWidth; var maxW = 640; var minW = 320; if (wW > maxW) wW = maxW; var ratio = wW / minW; html.style.fontSize = 50…

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /> <meta content="telephone=no" name="format-detection" /> <meta name="format-detection&…

按百分比布局,精度肯定不会有rem精确 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0"> <title>Docum…

原文[https://blog.csdn.net/qq_31383345/article/details/53127804] 早上在论坛上看到有人写了关于图片等比例缩放的文章,只是判断了图片宽是否大于屏幕宽.我之前在做Android的时候也会遇到图片等比例缩放的问题.应该是用图片宽高比和屏幕宽高比做判断.做个笔记. 老规矩,先上图. 1.图片高宽比小于屏幕高宽比 2.图片高宽比大于屏幕高宽比 3.这种其实也是图片高宽比小于屏幕高宽比,但是高宽都大于屏幕高宽.所以不能简单用高宽来判断,应该是用高宽…

原文:http://www.wxapp-union.com/portal.php?mod=view&aid=360 早上在论坛上看到有人写了关于图片等比例缩放的文章,只是判断了图片宽是否大于屏幕宽.我之前在做Android的时候也会遇到图片等比例缩放的问题.应该是用图片宽高比和屏幕宽高比做判断.做个笔记. 老规矩,先上图. 1.图片高宽比小于屏幕高宽比 2.图片高宽比大于屏幕高宽比 3.这种其实也是图片高宽比小于屏幕高宽比,但是高宽都大于屏幕高宽.所以不能简单用高宽来判断,应该是用高宽比判断后做…

本篇适用于初次使用rem为单位切图而无从下手的童鞋.核心是根据屏幕动态改变根元素字体大小,以达到适配各种屏幕.这只是一个拿来就用的教程.很多东西没有详细说明.不过对于快速做手机端切图很有帮助. 模板:Github 使用:1.下载完成后首先修改js文件中的基本单位:psd宽度是640就写640,是750就写750.现在的设计稿大部分是以iphone 6 为基准设计的,也就是750px. 2.切图时,我们以100px为基本单位(至于为什么是100px,自己看看我的js代码就知道了),每个元素的宽高,…

var html = document.querySelector('html'); changeRem(); window.addEventListener('resize', changeRem); function changeRem() { var width = html.getBoundingClientRect().width; html.style.fontSize = width / + 'px'; }…

window.onload = window.onresize = function (event) { document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth / 750) + 'px'; } 1rem=100px…

wxml: <image style="width: {{imagewidth}}px; height: {{imageheight}}px;"  src="{{imagefirstsrc}}" bindload="imageLoad"></image> JS //index.js //获取应用实例 var imageUtil = require('../../utils/util.js'); var app = getA…