移动端为什么要做适配 移动端相对PC端来说大部分浏览器内核都是基于Webkit的,所以大部分都支持CSS3的最新语法.但是由于手机的屏幕尺寸和分辨率都不太一样(尤其是安卓),所以不得不对不同分辨率的手机做适配来达到近似的展示效果. 一般来说,UI只会给我们提供一份设计图,目前比较多的是参考手机淘宝的方案给一份750px宽的设计稿,而我们前端要做的就是在不同分辨率的手机上以同样的效果展示这份设计稿. 在讲适配方案之前,有几个基本的移动端开始相关的知识点得了解一下 rem单位: 说到rem这个单位就…

刚进部门就被拉去趟移动端Web的浑水,视觉稿是按照640px设计的.那如何做屏幕适配呢?当然想到的第一方法就是问前辈了,问他们之前怎么做的,前辈说直接按视觉稿来,我说640太大了,他说除以2啊,按320来..我说不行吧,屏幕多种多样的,6 plus显示的得多小..他说你和视觉沟通下...orz...还是自食其力吧——网络搜索,大概能搜到一些,不过要么太高大全(淘宝的方案),要么都是零零碎碎的.最终根据淘宝的方案还有Rem这个单位,自己做了一套简单的方案. 开始呢,还是要对一些概念做一些说明,当然…

移动的meta标签 <meta  name="viewport" content="width=device-width, initial-scale=1,user-scalable=no"> 常见移动web适配方法: 1.定高,百分比布局 2.flex布局 3.media媒体查询 rem(font size of  the root element)原理与简介: 1.字体单位:它的值根据html根元素大小来定,同时可以作为宽度高度等单位. 2.适配原理…

背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 1)首先,选取一款手机的屏幕宽高作为基准(以前是iPhone4的320×480,现在更多的是iphone6的375×667). 2)对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对iphone6而言:…

为什么用rem不用px? 主流:各大网站的移动版绝大多数都是用的rem.   移动端屏幕分辨率差别太大:最低适配的iPhone6,分辨率仅为750*1334.而现在市面上大多数手机,都达到了1080*1920或1080*2340(全面屏). 所有元素都要用rem吗? 大部分时候都是如此,但也有一些例外,比如文字的font-size,可能直接设为如17px,直接写死.一些近乎占满整个宽度的banner,可能它的样式会是这样:(width: 100%;padding: 0 10px;),即左右宽度也…

Ehcache在java项目广泛的使用.它是一个开源的.设计于提高在数据从RDBMS中取出来的高花费.高延迟采取的一种缓存方案.正因为Ehcache具有健壮性(基于java开发).被认证(具有apache 2.0 license).充满特色(稍后会详细介绍),所以被用于大型复杂分布式web application的各个节点中.1. 够快Ehcache的发行有一段时长了,经过几年的努力和不计其数的性能测试,Ehcache终被设计于large, high concurrency systems.2.…

链接地址1:http://www.cnblogs.com/zjzhome/p/4802157.html 链接地址2:http://www.html-js.com/article/Mobile-terminal-H5-mobile-terminal-HD-multi-screen-adaptation-scheme%203041 链接地址3:http://isux.tencent.com/web-app-rem.html common.js参考淘宝m.taobao.com var dpr, rem…

概念理解 viewport视口 visual viewport 可见视口,设备屏幕的宽度  windw.innerWidth/Height layout viewport 布局视口,DOM宽度 document.documentElement.cliendWidth/Heig ideal viewport 理想视口:目标是让把默认的layout viewport宽度设置为移动设备的屏幕宽度 visual viewport = layout viewport * scale <meta name=…

前置知识 在这里了解实现网页主题切换的相关知识. CSS 变量 要实现主题切换需要了解一点 css 自定义属性.当然,本文还提供了其他实现方式,为了不给您接下来的阅读带来阻碍,先了解它. 变量的声明 声明变量时,变量名前要加上 --,例如 --example: 20px 即是一个 css 声明语句.意思是将 20px 赋值给 --example 变量.所以 css 变量又叫做 css 自定义属性.在 css 的任何选择器中都可以声明 css 变量,通常将所有 css 变量声明在 :root 选择…

移动web开发流式布局 1.0 移动端基础 1.1浏览器现状 PC端常见浏览器:360浏览器.谷歌浏览器.火狐浏览器.QQ浏览器.百度浏览器.搜狗浏览器.IE浏览器. 移动端常见浏览器:UC浏览器,QQ浏览器,欧朋浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器,以及其他杂牌浏览器. 国内的UC和QQ,百度等手机浏览器都是根据Webkit修改过来的内核,国内尚无自主研发的内核,就像国内的手机操作系统都是基于Android修改开发的一样. 总结:兼容移动端主流浏览器…