第133天:移动端开发的一些总结

1、 piexl 像素知识

640 * 1136的图片能不能在iphone5上完全展示? iphone5分辨率640*1136

逻辑像素与物理像素的关系 px逻辑像素:浏览器使用的抽象单位 dppt物理像素:设备无关像素 dpr:设备像素缩放比 计算公式:1px = (dpr)^2 * dp iphone5的 dpr = 2;

DPI:打印机每英寸可以喷的墨汁点(印刷行业) PPI:屏幕每英寸的像素数量,即单位英寸内的像素密度 目前,在计算机显示设备参数描述上,二者意思一致 计算公式:以iphone5为例:ppi = √(1136^2 + 640^2)/4 = 326ppi(视网膜retina屏) 注意:单位为硬件像素(物理像素),非px PPI越高,像素数越高,图像越清晰。但可视度月低(小),系统默认缩放比越大。 retina屏(高清屏):dpr都是>=2。

2、 viewport

手机浏览器默认为我们做了两件事情: ① 页面渲染在一个980px(ios)的viewport ② 缩放

为什么要有viewport? 一个300多像素的屏幕,放一个1000多像素的页面,会混乱,所以要先虚拟一个980像素的页面,然后进行缩放。

度量|视口 visual viewport ==== 窗口缩放scale 布局 layout viewport

设计移动web,为什么不使用默认的980px的布局viewport? ① 宽度不可控制,不同系统的设备默认值都可能不同 ② 页面缩小版显示,交互不友好 ③ 链接不可点 ④ 有缩放,缩放后又有滚动 font-size为40px等于pc上12px同等物理大小,不规范

3、 meta标签

移动web最佳viewport设置: 布局viewport = 设备宽度 = 度量viewport <meta name=” viewport” content = “width=device-width, initial-scale = 1, user-scalable = no”>

4、 设计移动web

方案一:根据设备的实际宽度来设计(常用)(不缩放)

手机宽320px,我们就拿320px设计。

方案二:1px = 1dp,易解决高清问题

缩放0.5。根据设备的物理像素dp等于抽象像素px来设计。1px像素边框和高清图片都不需要额外处理。

以方案一为例,将pc端页面改成适应移动端的页面:

在移动开发过程中要学会做减法,一些不太重要的东西可以隐藏起来。

5、 使用什么布局?

很多网站都是使用固定布局,以前凡客、淘宝也有段时间使用过流式布局,现在都改成固定布局。 但是固定布局不适合移动开发。

可以使用

① 响应式布局:responsive 高清图片 retina px em rem ② flex弹性盒子布局:高效居中方案 等比例填充列行 background-size font-size 多行文本溢出

6、 flexbox弹性盒子布局

根据元素个数不同,自动填充 display:-webkit-flex; 表示使用弹性布局 子元素设置 flex:num; 占容器的比例

划分方式:

① 等比划分(flex:num;表示)
② 混合划分(有固定的像素(eg:100px)与flex:num;混合在一起)
③ 不定宽高的水平垂直居中:
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);

flexbox版不定宽高的水平垂直居中:

.parent{
        justify-content :  center;      //子元素水平居中
        align-items :  center;          //子元素垂直居中
        display :  -webkit-flex;
}

flexbox弹性盒子布局,介于兼容性问题,建议使用旧版方案:

①新flex布局:

display :  -webkit-flex;
-webkit-fiex:  1;       //子元素的flex
justify-content :  center;
align-items :  center; 

②旧flexbox布局:

display :  -webkit-flex-box;
-webkit-fiex-box:  1;       //子元素的flex
box-pack :  center;
box-center:  center; 
一种垂直居中的hack:

(1)hack方式

li{
    line-height: 568px;
    vertical-align:middle;
}
li img{
    vertical-align:middle;
}

(2)更优雅的方式,对于高级浏览器来说

// 父元素
position:absolute;
// 子元素
li{
    display: table-cell;/*盒模型变成表格的元素*/
    vertical-align: middle;
}

(3)另一种垂直居中方式

li{
    display: -webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏LIN_ZONE

7款让人惊叹的HTML5粒子动画特效(转载)

这是一款利用HTML5 Canvas模拟出来的30000个粒子动画,当你用鼠标在canvas画布上移动时,鼠标周围的一些粒子就会跟着你移动,并形成一定的图案,就...

5602
来自专栏运维小白

开源博客markdown插入表格语法

普通的表格 Markdown 代码: | 一个普通标题 | 一个普通标题 | 一个普通标题 | | ------ | ------ | ------ | | 短...

23610
来自专栏从零开始学 Web 前端

从零开始学 Web 之 CSS3(四)边框图片,过渡

并且,添加边框图片是以背景的方式添加的,所以会有可能文字覆盖在边框的情况,后面也会介绍处理方法。

511
来自专栏Coco的专栏

滚动视差?CSS 不在话下

视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。 作为网页设计的热点趋势,越来越多的...

3577
来自专栏前端小叙

css如何实现一个元素高度固定宽度按比例显示?

用padding-top百分比可以实现宽度固定高度按比例展示,现在的需求是对一个video视频的盒子div高度是固定的,宽度如何按比例展示?

1331
来自专栏GIS讲堂

"GIS讲堂"第八课—结合UDIG实现图层样式的定制

在本节课程中,分别讲述了三种类型的点的样式,包括:简单点样式、组合点样式、图标点样式。

1124
来自专栏木子昭的博客

CSS宽高等比布局

宽度是高度的两倍(等比缩放) 实现思路: 以父级元素为基准, 子级width:100%;(也就是父级宽度的100%), padding-top:50%(也就是...

3547
来自专栏HTML5学堂

移动端H5知识[系列] - fixed定位模式与其他

TML5学堂:移动端H5知识普及 - fixed定位模式与其他。虽然知识小,但是不得不承认的是,它们很重要~! 本文会讲解到fixed的定位模式,另外,关于li...

2945
来自专栏Elson's web

30分钟彻底弄懂flex布局

在这篇文章里,想说说flex布局的属性语法及其细节。那么网上也有不少flex布局的教程,为什么又要再写一篇?

1.8K18
来自专栏IMWeb前端团队

css设计中的不变与可变

"人活一世,有人成了面子,有人成了里子,都是时势使然。”——《一代宗师》 如果重构分里子与面子的话,那么html应该是负责里子的,而css就是负责面子了。在上篇...

2256

扫码关注云+社区