响应式 和 移动 web
移动web 教程:http://www.imooc.com/learn/494
iphone5
问题一:6401136的图片,能否在iphone5上完全显示?
chrome下 iphone5:320568
物理像素 1136640 dp pt
逻辑像素 568320 开发用 px
px 逻辑像素
dp pt 设备无关像素
dpr 设备像素缩放比 iphone5的dpr=2
1px = dpr * dpr * dp
DPI 打印机
PPI 单位英寸内的像素密度 iphone ppi=326, 用物理像素计算
PPI越高 图像越清晰,系统默认设置缩放比越大 可视度越小
viewport
ios viewport = 980
安卓的不一定
在viewport中渲染 缩放
visual viewport
layout viewport
不用默认的980px布局viewport
fonts-size = 40px === pc 12px 不规范
meta
通过meta来改变viewport
w3cschool上没有响应的知识
meta格式:
常用的设置:
width: 设置布局viewport的特定值 device-width
initial-scale:设置页面的初始缩放
minimum-scale
maximum-scale
user-scalable
布局viewport document.body.clientWidth
度量viewport window.innerWidth
width = device-width 设备宽度=布局viewport
缩放比设置为1 initial-scale=1:布局viewport=度量viewport
它自带width = device-width
<meta name='viewport' content='width=device-width,initial-scale=1,user-scaleable=no'>
设计移动web
方案一:根据实际宽度来设计
方案二:1px=1dp 缩放0.5 可以减少很多问题
web布局
响应式布局
弹性布局: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
混合划分:比如 图片是固定的,文字需要根据屏幕来自适应;
不定宽高的水平垂直居中:flex版
display: -webkit-flex;
justify-content: center; //父元素
align-items: center;
flex-direction: row, row-reverse, column, column-reverse,
flex-wrap:nowrap(不会溢出,子元素不换行), wrap(子元素会换行),wrap-reverse
flex-flow: flex-direction flex-wrap
justify-content(用于父元素): flex-start(float:left), flex-end(float:right), center(居中), space-between(两边对齐), space-round(按间距划分)
align-self(用于子元素): flex-start flex-end center auto(stretch) baseline stretch
align-item(父元素):跟align-self的参数一致
align-content: 子元素换行,不会切分父元素的高度,而是按照原来的高度
order: 子元素排序
兼容性:
ios可以使用最新的flex布局
android4.4以下 只兼容旧版本的flexbox布局
android4.4以上,可以使用最新的flex布局
新旧效果一样,只是属性不同,推荐用旧的
autoprefixer nodejs
响应式设计
百分比布局
弹性图片 max-width:100%
重新布局 显示与隐藏
特殊样式处理
高清图片处理
在移动web页面渲染图片,宽高应用物理像素渲染,100100 应用100dp100dp 或者width:(w_value/dpr)px; height:(h_value/dpr)px;
一像素边框
在retina屏幕下的问题,1px使用2dp渲染
border: 0.5px 不行
scaleY(.5)
.single{
width:80%;
margin:0 auto;
margin-top: 50px;
margin-bottom: 50px;
height:100px;
border:1px solid #ddd;
}
.op{
position: relative;
width:80%;
height:100px;
margin: 0 auto;
}
.op:before{
position: absolute;
top: -1px;
left: 0;
content: '';
width: 100%;
height: 200px;
border: 1px solid #ddd;
-webkit-transform: scaleY(0.5);
}
相对单位rem
px有点固定,不能根据尺寸的大小来改变,使用相对单位更能体验页面兼容性
em:相对父节点
rem:相对html 推荐
rem的基值设置多少比较好?
rem = screen.width / 20 这是他推荐的,这样好吗?
font-size不使用rem:字体的大小是趋向于阅读的实用性,并不适合排版布局,同理 趋向于一些固定的元素的特性
终端交互优化
300ms click响应慢300ms,使用tap事件
touch和tap有什么不同 在手机上看下tap的效果
点透的bug:
解决方案
一:缓动动画
二:全部用tap 不用click 不完美
三:zepto已经被fixed
tap:自定义事件,由touch实现,demo自己实现的,zepto已经封装好了
安卓下有个bug:touchstart只会触发一次,touchmove只会触发一次,touchend不触发
解决办法:touchmove 加入 event.preventDefault(),导致默认行为不发生,如页面不滚动
弹性滚动
body层滚动:自带弹性滚动,overflow:hidden失效;gif和定时器暂停
局部滚动:没有弹性滚动,没有滚动惯性,不流畅
overflow: scroll;
-webkit-overflow-scrolling: touch;
body自带弹性滚动,如果想要局部弹性滚动,需要在body添加如上代码。
安卓不支持原生的弹性滚动,需要借助三方库 iScroll实现
下拉刷新
响应式 和 移动 web的更多相关文章
- 【css】25个漂亮的响应式布局的web设计【转】
响应的web设计的做法是提高用户的浏览质量,并在不同设备上能够完美的浏览使用,就像大前端推出的D7主题.看看下面美丽的响应的网站布局,通过本文你会在以后的设计中找到响应的web设计的灵感. 1.Mar ...
- 响应式Web设计 – 布局
写在前面 去年上半年,我开始着手推动项目中响应式设计的落地.以官网优化需求为契机,主动去做了响应式的页面设计,也说服了产品.设计和开发的相关同事一起把它上线落实,但不幸的是,由于各种方面的原因,比如, ...
- 【Web探索之旅】第二部分第五课:响应式网站和移动应用
内容简介 1.第二部分第五课:响应式网站和移动应用 2.第三部分第一课预告:服务器 第二部分第五课:响应式网站和移动应用 在我们开始聊响应式网站之前,我们可以聊聊移动App(App是Applicati ...
- web前端响应式布局,自适应全部分辨率
写phpd的我. 近期公司要弄个app关键是没有web开发,而我有比較闲,那就扛枪上阵吧. 响应式布局,web端的?php我一直都是用tp框架,对于web首先想到的是bootstrap框架.仅仅是简单 ...
- 浅谈响应式Web设计与实现思路
是否还在为你的应用程序适配PC端,移动端,平板而苦苦思索呢,是否在寻找如何一套代码适配多终端方式呢,是否希望快速上手实现你的跨终端应用程序呢,是的话,那就看过来吧,本文阐述响应式UI设计相关理论基础, ...
- 一点响应式Web设计与实现思路
摘要: 是否还在为你的应用程序适配PC端,移动端,平板而苦苦思索呢,是否在寻找如何一套代码适配多终端方式呢,是否希望快速上手实现你的跨终端应用程序呢,是的话,那就看过来吧,本文阐述响应式UI设计相关理 ...
- 35 个免费创新的响应式 HTML5 模板
HTML5 和响应式都是 Web 开发领域中的热门技术,本文向你推荐 35 个免费的响应式 HTML5 模板,将两种技术完美结合. Mori responsive HTML5 Template Res ...
- 响应式布局与bootstrap框架
原文 网页布局方式 1.固定宽度布局:为网页设置一个固定的宽度,通常以px做为长度单位,常见于PC端网页. 2.流式布局:为网页设置一个相对的宽度,通常以百分比做为长度单位. 3.栅格化布局:将网页宽 ...
- 【温故知新】——Bootstrap响应式知识点复习
前言:本文是自己在学习课程中的课程笔记,这里用来温故知新的,并非本人原创. 开发工具 1.记事本,Editplus,... ... 2.Sublime,Dreamweaver 3.Webstorm = ...
随机推荐
- MySql5.5 SQL优化 慢查询日志存储
一.MySql的慢查询日志的开启和存储 1.查看是否把没有使用索引的SQL记录到慢查询日志中,查看 log_queries_not_using_indexes 变量; show VARIABLES L ...
- iOS.Info.plist
1. Custom message when asking for Address Book Permissions http://kevinyavno.com/blog/?p=176
- java读取properties文件时候要注意的地方
java读取properties文件时,一定要注意properties里面后面出现的空格! 比如:filepath = /home/cps/ 我找了半天,系统一直提示,没有这个路径,可是确实是存在的, ...
- Luogu 3620 数据备份 - Set
Solution 很显然, 最优情况肯定是相邻两个相连 . 然后模型就跟 Luogu1484 类似了. 把两个房子 看成一个坑 (参考 Luogu1484), 选取 $k$ 个不相邻的坑, 使得权值最 ...
- Luogu 2279 [HNOI2003]消防局的设立 - 贪心
Description 给定一棵树形图, 建若干个消防站, 消防站能够覆盖到距离不超过2的点, 求最少需要建几个消防站才能覆盖所有点 Solution 从深度最深的点开始, 在它的爷爷节点上建, 每建 ...
- Java Http协议处理类
public class HttpRequest { public static String doGet(String url,String params) throws Exception{ re ...
- 神啊!PS是你这样用的吗?
对于古典油画名作,人们总是持欣赏的态度去观看.能流传至今的作品,也都是当时的名作. 不过,乌克兰艺术家 Alexey Kondakov 却不是这样的,在他手中,那些世界名画也不过是他恶搞的素材罢了. ...
- Spring访问数据库(方式上跟HQL类似,每行记录映射一个实体类)
看了这篇技术博客,觉得收获较大,收藏了:http://sarin.iteye.com/blog/875915
- redis在游戏服务器中的使用初探(三) 信息存储
摘要: 搭建了服务器环境 有了客户端 我们来假想下以下应用场景:我们简单举个实例来描述下Hash的应用场景,比如我们要存储一个用户信息对象数据,包含以下信息:用户ID,为查找的key,存储的value ...
- Shortest Unsorted Continuous Subarray LT581
Given an integer array, you need to find one continuous subarray that if you only sort this subarray ...