移动端IOS系统项目总结

来源：互联网发布：洗牌算法编辑：程序博客网时间：2024/06/07 07:46

**一般兼容以下三个机型:

分为 IPONE5S 320*2=640 ; IPONE6 375*2=750 ; IPONE6 PLUS 414*3=1242 ;

切图时需要除以dpr值如 750/2

**苹果IOS系统与安卓系统不同，有内置的INPUT圆角等内置样式，所以项目一开始就需要清除

input[type=button],input[type=text],input[type=password]{-webkit-appearance:none;outline:none}；

input[type=text]为输入框里字体的设置

内置默认圆角边框 input{border-radius:0}清除

****关于手机端自适应开发问题****

首先引用一篇网上有关于淘宝拉勾网网易等自适应开发的帖子（转载）http://www.cnblogs.com/lyzg/p/4877277.html?utm_source=caibaojian.com点击打开链接

目前用的是用JS判断，当设计图为750px时， <script>document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';</script>，参照可为font-size:100PX;切图时尺寸都是相对于750PX而言的，就照着设计图除以100（单位rem）就行了。

间距等：

1REM = 100PX，所以假如DIV 设计稿宽度为210PX，则div{width:2.1rem};(210px/100px=2.1rem)

字体

用PX，实现文字流，大屏幕可显示更多字

图片（图片缩放）：

*****关于插入图片自适应******

在一个DIV里插入IMG图片，IMGwidth设置100%，高度不设置，达到图片的自动缩放。图片大小再由DIV用REM单位取宽度高度。MARGIN等间距则用外层的DIV来控制

****背景图片自适应****

用background然后设置background-size:100%；大小由外层DIV的REM单位设置

图片切图时，放大1.5倍再保存为图片，再按750的尺寸布局，这么做在3dpr的高清屏幕也能清晰显示

DPR = 设备像素 / CSS像素    （设备像素为手机实际像素，CSS像素为日常JS,CSS里的PX。）

以iphone5为例，iphone5的CSS像素为320px*568px，DPR是2，所以其设备像素为640px*1136px

dpr越高，屏幕更清晰。

布局DIV位置自适应：

弹性布局display:flex 经实践证明两大毒瘤 IE（部分低版本），UC浏览器！不支持，所以这一新特性还是少用为好，乖乖用浮动去吧

0 0