cssrem只是帮你自动计算,省去了你在切图时,从设计稿拿到的px再根据比例转换成rem的中间过程. 这个40我无法猜测, 以前设计稿给的都是按640px(iphone5s的宽)来的,我们就按照这个比例640px切分成20等分的话,一份就是640/20 = 32px, 也就是1 rem = 32px; (这里把40换成32),另外这个32px就是要你在html里设置的font-size大小了. 按第一点所说,如果你的比例就用40,那明显你就要在html的font-size里设置40px了 假如你…

1,rem的定义 rem(font size of the root element)是指相对于根元素的字体大小的单位.rem是一个相对单位.和em非常相似.em(font size of the element)是指相对于父元素的字体大小的单位.两者之间的区别是一个计算的规则是依赖根元素一个是依赖父元素计算. 2,为什么要使用rem rem可以实现强大的屏幕适配布局.屏幕适配有很多种做法,例如:流式布局.限死宽度.还有就是通过响应式来做.但是,这些方案都有各种各样的弊端.使用流式布局在页面布局…

// 屏幕高度 #define XMGHeight [UIScreen mainScreen].bounds.size.height // 屏幕宽度 #define XMGWidth [UIScreen mainScreen].bounds.size.width // 以iPhone5为基准(UI妹纸给你的设计图是iPhone5的),当然你也可以改,但是出图是按照7P(6P)的图片出的,因为大图压缩还是清晰的,小图拉伸就不清晰了,所以只出一套最大的图片即可 #define XMGiPhone5W…

选择两个视图使其等宽高,再去约束里面就可以设置乘数因子. 简单的一个例子: 要求:设置白色视图的宽度为蓝色视图的一半 1.点击白色视图连线到父视图,选择 Equal Widths     2.选择右边第五个模块 直尺     3.双击刚刚添加的宽度约束    4.视图如下 5.在Multipler里填上0.5   6.Constant是在 宽度0.5倍基础上的增量   7.再设置其他的约束,即可…

关于iPhone设备不同显示尺寸适配的一些方法   ------关于适配的理解------ 1.什么是适配? 适配是对不同硬件和系统软件的适应,硬件包括屏幕显示,处理器,内存等等(目前主要是屏幕适配,iPhone 6s新增了3D Touch功能,其他硬件功能并没有实质性的改变),软件主要是不同iOS系统(有些在最新系统(通常会尽量向下兼容)不再支持的方法都需要做一些判断). 2.为什么要适配? 适配是为了兼容不同的设备. 3.屏幕适配主要有哪些方式? (1)等比例适配(所有视图按屏幕大小缩放,相…

webApp 页面布局 1. 流式布局 概念: 流式布局是页面元素宽度按照屏幕分辨率进行适配调整,但是整体布局不变. 设计方法: 布局都是通过百分比来定义宽度,但是高度大都是用px固定的. 弊端: 虽然可以让各种屏幕适配,但是显示的效果极其不好.(有些手机页面的宽度会被拉伸,但是高度不变,很不协调.) 大量百分比布局,也会出现许多兼容问题. 2. 静态布局 概念: 静态布局是不管浏览器尺寸是多少,网页上所有元素的尺寸一律使用px作为单位,.这种设计常用于pc端 设计方法: 结合min-width…

本文记录一些适配问题的研究,基础概念不做过多介绍. Android在做屏幕适配的时候一般考虑两个因素:分辨率和dpi.分辨率是屏幕在横向.纵向上的像素点数总和,一般用"宽x高"的形式表示,例如:1080x1920.dpi是dots per ich的缩写,表示每英寸的像素点数,例如160dpi指手机水平或垂直方向上每英寸距离有160个像素点. 一.dp和px dp和px都是编写布局时的单位,它们之间可以通过dpi来换算,换算公式如下: 公式一:px值 = dp值 * (dpi/160)…

大家都知道在iOS开发当中对于UI适配问题可以从如下两个方面去考虑: 1.比例适配 2.利用autolayout自动布局 通常情况来说,利用auto自动布局是一个比较好的方案,开发者可以利用storyboard添加约束,以及sizeclass完美适配,如果你是比较喜欢纯代码的方式的话,那么PureLayout 以及Masonary也是不错的自动布局第三方库(目前项目当中也正在用PureLayout).但是,相信有不少人会有过这样的困惑,随着控件的约束太多,而导致约束冲突,然而对于自己来说看上去也…

移动端web页面如何适配,现有两个方案: 1 设置viewport进行缩放 简单粗暴,使用过程中反应缩放会导致有些页面元素会糊的情况.天猫的web app的首页使用这种方案 在页面中加入viewport.js var doc = window.document, docEle = doc.documentElement, dpr = Math.ceil(window.devicePixelRatio), vp = document.querySelector('meta[name="viewpo…

以往web移动适配,常规写法是:media only screen @media only screen and (min-device-width: 320px){ //针对iPhone 3 } @media only screen and (min-device-width: 320px)and (-webkit-min-device-pixel-ratio: 2) { //针对iPhone 4, 5c,5s, 所有iPhone6的放大模式,个别iPhone6的标准模式 } @media o…