淘宝——移动端页面终端适配
注:本文参考自:http://www.cnblogs.com/xianyulaodi/p/5533201.html
阅读目录
- 适配的要求
- 适配的方法,3个步骤
- 适配中背景图片的处理
- 适配的原理解析
摘要:在进行移动端界面的书写的时候,如果把宽度高度或者字体大小全部写死的话,那么在所有手机上看到的大小都一样,存在的问题就是同样大小的字体,或者一个盒子模型,
在大屏幕手机上看起来会有点偏小。比如iphone6PLUS。如果是做成适配的话,就很好的解决了这个问题,大屏幕显示的内容大一点,小屏幕显示的小一点。
所以今天做一个移动端页面适配的小小总结
适配的要求
1、在不同分辨率的手机上,页面看起来是自适应的。整体效果看起来比较和谐。不会说大屏幕上看起来特别小。小屏幕上看起来特别大
2、主要是关注字体,宽高,间距,图片大小等。
3、所提供的设计图一般是手机分辨率的两倍,才能方便做适配。
4、使用rem做单位,而不是传统的px
适配的方法,3个步骤
步骤1:
设置viewport,也就是平时写移动端页面都要加上的:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
步骤2、
首先我们在我们的页面引入下面的flexible.js,
这段适配的js代码是拿淘宝的来用的。
适配的js代码的github地址如下:https://github.com/amfe/lib-flexible/blob/master/src/flexible.js。
步骤3、
页面上我们的css代码可以这样写,比如设计图给我们的尺寸是750*1000的。某个容器在设计图的宽度是150px*225px,那我们在css里面
宽度:150px/750px/10=150px/75px=2rem;
高度为:225px/75px=3rem;
一句话:布局的时候,各元素的css尺寸=设计稿标注尺寸/设计稿横向分辨率/10;
div{width: 2rem;height: 3rem; }
通过上面的3个步骤,我们就可以将我们的移动端页面做成适配的了。
css换算方法
不过有一点,一直算来算去挺烦的。所以在写css的时候,最好使用css预处理器,比如sass、less来写,这样就方便很多了。
或者在sublimeText3中安装cssREM插件,正常书写px单位,然后编辑器自动帮你换算成rem.
cssREM插件的安装教程:https://github.com/flashlizi/cssrem
注意点:
容器的宽度高度我们用rem为单位,但是字体大小font-size我们还是用px,而不是用rem
原因:
flexible.js的作者winter是这样解释的:考虑到字体的点阵信息,一般文字尺寸多会采用 16px 20px 24px等值,若以rem指定文字尺寸,会产生诸如21px,19px这样的值,会导致字形难看,毛刺,甚至黑块,故大部分文字应该以px设置。
一般标题类文字,可能也有要求随屏幕缩放,且考虑到这类文字一般都比较大,超过30px的话,也可以用rem设置字体。
适配中背景图片的处理
1、如何使用background-size
因为是使用了rem来做单位,我们在写移动端的背景图的时候,一般使用background-size来控制大小,那要怎么来换算呢?
换算单位如下:
background-size=背景图的大小/该设计图的宽度*10
打个比方:我的背景图是16*18,设计图是按照640的宽度来设计的。那么我的background-size值为
background-size: 16/640*10rem 16/640*10rem 也就是 background-size:0.25rem 0.28125rem;
通过这样控制之后,我们的背景图也做到了适配的效果
2、雪碧图的适配!!!!
刚开始做适配的时候,有一件事是比较头疼的,那就是雪碧图的适配,主要是background-size和background-position的配置比较烦。那么怎么进行在使用fexible.js的时候适配雪碧图呢,方法如下:
假如我有下面这张雪碧图,设计图给我的是按640的分辨率来做的。
这张雪碧图的大小为200px*458px
假设现在我们要用的那个勋子的背景图。分为以下几步:
1、测量勋字这张背景图的大小,大小为:75px*85px
2、测量这个勋字在雪碧图的位置,也就是设置background-position:.经测量,他在雪碧图的位置为 x:-123px,y:-7px
3、对着张雪碧图进行换算:看下面代码:
知道了上面的尺寸,我们就行换算即可,将每个值除以640再乘以10 为什么这么算,可以看看源码
要使用这样雪碧图:
1
2
3
4
5
6
7
8
9
10
|
<!-- 长宽为: -->
width: 75/640*10=1.171875rem;
height: 85/640*10=1.328125rem;
<!-- background-size为 -->
<!-- 因为整张雪碧图的宽度为200px, -->
background-size: 200/640*10rem auto;
<!-- background-position为: -->
background-position: -123/640*10rem -7/640*10rem;
|
html:
1
|
< i class="item1"></ i >
|
css:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
.item 1 {
width : 75 / 640 * 10 = 1.171875 rem;
height : 85 / 640 * 10 = 1.328125 rem;
margin : 20px auto ;
background : url ( '../images/itemBg.png' ) no-repeat ;
// 因为整张雪碧图的宽度为 200px ,
background- size : 200 / 640 * 10 rem auto ;
等于
background- size : 3.125 rem auto ;
// 该背景图在雪碧图的位置
background-position : -123 / 640 * 10 rem -7 / 640 * 10 rem;
等于
background-position : -1.921875 rem -0.109375 rem;
display : block ;
}
|
转载于:https://www.cnblogs.com/dp168/p/5997499.html
淘宝——移动端页面终端适配相关推荐
- 淘宝 Android 端图片体验优化实践
Android 端图像加载.显示.处理.监控集一体的一站式解决方案. 背景 Phenix 图像加载体系是立足手淘面向阿里巴巴全集团打造的一款 Android 端集图像加载.显示.处理.监控于一体的一站 ...
- 淘宝电商页面和产品海报设计PSD分层素材模板
电商影响越来越大,已经渗透的我们日常生活的各个方面,很多以前不懂也不关心电商的客户也激动的做电商,以为电商就是把产品拍照片上传到淘宝上,就开始了电商生意.我只想说理想很丰满,现实很骨感.若只想打开淘宝 ...
- 不能打开淘宝单个商品页面
上网基本所有网站都正常(当然youtube是上不了了,要是在镇上能上才不正常呢),淘宝网站也都基本ok,但是就是淘宝的商品页面打不开,机子上有chrome和IE9两个浏览器,都是不行,每次都是停在re ...
- web淘宝电商页面搭建
web淘宝电商页面搭建 点击此处下载完整代码 图片效果展示 首屏内容 次屏内容 整体代码并不包含JavaScript部分,因此页面为静态页面,但代码包含了淘宝网的鼠标触发事件.
- 做好淘宝客单页面的几个技巧和方法
今天来和各位站长朋友谈谈做好淘宝客单页面的几个技巧和方法. 相信大家都知道,单页面是目前比较主流的淘宝客推广形式之一,由于它的方向性较强.转化率较高.建站难度和后期维护也比较简单轻松,因此得到 ...
- HTML实战案例4:制作淘宝店铺列表页面
实战案例4:制作淘宝店铺列表页面 一.完整的页面效果图 二.文本素材 淘宝首页> 店铺街> 所有店铺(4626173) 淘店 店铺类目 韩都衣舍旗舰店 ...
- 使用Idea做一个淘宝的登录页面和手机页面
一.使用Idea做一个淘宝的登录页面 代码如下 <!DOCTYPE html> <html lang="en"> <head><meta ...
- 弘辽科技:淘宝描述区页面的高度是多少?高了怎么减去?
原标题<弘辽科技:淘宝描述区页面的高度是多少?高了怎么减去?> 淘宝商品的详情页策划,可以极大的增加买家购买欲望,整洁.漂亮的宝贝页面可以提高客户的购物满意度.但是,商家在制作详情页时,会 ...
- uniapp仿淘宝详情页页面滑动tab切换
uniapp仿淘宝详情页页面滑动tab切换 建立util文件夹放一个Tool.js: export default{getRect(selector){return new Promise((reso ...
最新文章
- 最轻快的人脸检测yoloface
- 2019计算机科学与技术全日制调济,华侨大学2019计算机科学与技术学院非全日制考研调剂信息(第二批)...
- 松下SW-9585-C全功能DVD刻录机 狂降100+享受专业刻录!
- java_IO流之SequenceInputStream合并流的使用
- php7.0源码包下载,PHPDisk 7.0 V-Core系列发布,源码下载[更新20140821]
- 民用建筑工程给水排水设计深度图样_「安装工程识图」建筑给水排水施工图的识读方法...
- 【机器视觉】 dev_set_colored算子
- PowerDesigner 企业架构模型 ( EAM ) 说明
- 会java的鸭子_鸭子在Java中打字? 好吧,不完全是
- unity中怎么在InspectorI面板加LOGO
- 静态页中利用AJAX.NET实现无刷新页面
- QT中PRO文件写法的详细介绍,很有用,很重要!
- 在OpenLava中探索Fairshare调度
- 常见运维监控系统的技术选型
- 2019年,这些公路交通工程规范和标准有新政
- 重装windows10系统自定义安装时未出现分区,解决方法之一
- Flink服务的HA配置
- 视频剪辑软件调研(Corel VideoStudio 2018、爱剪辑、微剪辑)
- 第19章 数据库备份与恢复
- ios获取麦克风音频输入数据(PCM)计算DBSPL后与真实值差距很大