背景 移动端响应式布局开发主要方案有: 基于rem开发 基于媒体查询 基于弹性盒 基础概念 在讨论响应式布局知识前,先了解下移动端常用基础概念. 逻辑像素(CSS pixels) 浏览器使用的抽象单位,主要用来在网页上绘制内容:通常在我们实际开发中涉及到的CSS单位px都是指逻辑像素. 设备像素或物理像素(Device Pixels) 显示屏幕的最小物理单位,每个DP包含自己的颜色.亮度.等值的 CSS pixels在手机屏幕上占多大的位置,这不是固定的,这取决于很多属性:经过分析和总结,我们可…

媒体查询作为响应式布局的方法之一,实际项目中用途也很广.但是你真的知道怎么用吗? 例如,下面匹配 iphone6/7/8 屏幕 @media screen and (max-width: 375px){ /* CSS 代码 */ } 一般这么写,指的是webview的宽度,同样的,根据clientWidth 设置根节点是fontsize 也是参考的webview的宽度. 如果放在pc上或者是手机默认全屏H5里面,这么写是没有问题的. 但是混合开发,将H5页面嵌套在app的webview里面,这么…

http://www.jiangweishan.com/article/lowIeResposive.html 响应式布局,oh my god!!有点醉了,感觉是老生常谈的话题了.虽然已经谈过很多了,但这次也很有必要拿出来探讨下.为什么呢?往下看呗... 最 近在折腾公司首页的改版,设计师设计了三个版本,宽度分别为1600px,1200px,960px.看到这三个尺寸的设计,很明显需要做PC端的响应 式,我们都知道针对IE9+和其他高富帅浏览器的响应式,使用Media Query轻松搞定.至于I…

前言:PC端 电脑显示器的尺寸种类还是很多的,台式电脑和笔记本电脑尺寸相差就更明显,所以响应式布局还是很重要的,甚至是必须要考虑的. 响应式的页面好不好,在后管平台上很明显.因为后管平台,一般是全屏显示.不像官网那样两边有一个安全尺寸.    PC端的宽度相差太大,一般是常用响应式的布局(布局改变了,不仅仅尺寸变化):而不是像移动端那样,通过rem单位,只是改变了元素的尺寸. 一.栅格系统:(栅格系统是比较好的一种响应式布局,框架已经帮我们处理好了,只要配置下就可以自动实现响应式的布局) 1.栅…

响应式布局 响应式布局是现在很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案.所谓的响应式布局,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本.也就说一个页面可以在多个终端呈现出你想要的效果,能够兼容各个终端. 响应式布局的优缺点 优点: 面对不同分辨率设备灵活性强 能够快捷解决多设备显示适应问题 根据不同的显示器调整设计最适合用户浏览习惯的页面缺点: 兼容各种设备工作量大,效率低下 代码累…

14.动画 -moz-:火狐, -ms-:IE,-webkit-:谷歌,-o-:欧朋 transform旋转 rotate旋转 scale放大 translate偏移量 skew倾斜度 transform:rotate(40deg) scale(1.2) translate(40px) skew(30deg);<div id="d1"></div> transition 平滑过渡 #d1{width:100px;height:100px;background-c…

相信大家在做移动端的时候都会做各个手机的适配这种适配就是响应式布局在之前做网站的响应式从pc到手机用的是媒体查询 @media screen and (max-width: 300px){} 最大宽度300像素需要的样式 后面移动端业务兴起后做的响应式布局是基于手机各个型号以及各种分辨率的响应式这个时候用的就是rem布局,也是最简单的布局直接用rem写是不行的,这个时候就需要借助js function fontRem() { var bodyWidth = document.getElement…

做作业的时候遇见用css模拟Bootstrap的栅格布局,学习了一下.发现这个很有用,用来在不同的平台上得到很好地用户体验,比如Phone.Pad.大屏幕显示器.小屏幕显示器.自己模拟用css写了一下,用的是max-width.min-width子元素的宽度设置为不同的百分比,模拟栅格的12列.把100划分12份,用浮动宽度超出会自动换行,下面是段代码,以后会认真学习bootstrap. <style type="text/css"> #container1{min-wid…

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

1.媒体查询:@media only screen and (max-width: ) {},在最初做pc端时,使用各种媒体查询,因为pc的屏幕分辨率总共就几种,不嫌麻烦的重复使用类名.有很大的缺陷就是UI给的设计稿宽度是一定的,在做响应式式凭借自己的感觉是一种超级不爽的美感纠结症. 2.百分比:百分比也是相当的麻烦,还要去各种计算,不是程序员该做的笨重事. 3.em:缺陷是父盒子的百分比. 自己探索了一条自己选择走的捷径,不用在担心宽度和高度不等比例适应,也不用担心在各分辨率下的布局会出现问题…