移动端布局注意事项

发布时间：2021.05.24 浏览：2382

手机端开发须知简介
一.设备独立像素
就是屏幕的大小，也可以说是屏幕的尺寸（别名叫点，属于一个单位）
获取方法：window.screen.width/window.screen.height
注意：
1.横竖屏切换的时候，真机里的这个值不会改变，但是在模拟器里面是会改变的
2.一个点里，可以放多个像素（也就是px）
3.设备独立像素的值是可以被改变的(对于开发者来说)
二.设备像素也称作物理像素，是屏幕的分辨率（实际放的像素值，1px就是1px），买手机的时候厂商告诉你的分辨率这个值是虚拟的，无法获取
三.像素比（dpr，这个值无法修改）缩放的比例=设备像素（分辨率）/设备独立像素获取：window.devicePixelRatio
解释：如果说一个设备的dpr是2的话，也就是说在1个点里放2个像素的意思也就是说，375的设备，可以放750px的元素
几种适配布局的好坏
1.百分比布局值不好计算需要确定父级元素的大小，因为素有元素都是根据父级大小进行计算的宽度可以设置，但是高度不好设置一般情况下百分比布局都是配合其他布局一起使用的
2.比例缩放适配（把所有机型的设备独立像素都设置成一致的）viewport需要通过js动态的设置通过设置比例，把宽度缩放成一致的
注意：viewport里面给了缩放的值以后，最终页面的宽度是拿原来的值除以缩放比例
3.比例适配01（根据dpr的值，把视口进行缩放，缩放到物理像素，也就是把屏幕的尺寸直接设置成他的物理像素）也是动态的设置viewport缺点：有些dpr不是整数，会出现除不尽的情况，那缩放的倍数就会出现很长的小数，再去算物理像素的时候就有误差

4.rem适配px 绝对单位，无论屏幕多大，给多少就是多少，做不到适配em 相对单位，相对于自身字体大小的值，比如font-size：12px,则1em=12px问题：chrome下有最小字体限制，必须为12px，所以这个最小只能是12px如果两个一样的元素，但是里面字体不一样，那就不能统一设置了，或者字体更改的时候也要重新设置rem 相对单位，css3新增，相对于根节点（html）字体大小来设置比如html{font-size：10px} 则1rem=10px通过rem可以做到只修改根元素的大小，就能成比例的调整所有字体的大小精华首先rem的换算使用less进行动态的计算，设置好比例就不用自己计算了less文件写好后右键编译成css文件引入就可以了其次进入hbuilder找到工具-选项-Hbuilder-编译器-代码助手设置勾选启动px转rem提示，设置好两个比例，确定最后写代码的时候只要写了less文件的变量以后，直接写px就可以了，会有自动的代码提示转换成rem兼容问题汇总。

东八区结合用户及行业特性，个性化定制线上端口。通过“网络与数字化服务平台”，实现从网站到互动的体验，打造数字品牌托管到用户体验设计的全程一站式的服务。移动应用APP开发及小程序，适合企业+商城+办公+品牌+集团，并兼顾APPLE、ANDROID、WINDOWS，移动应用服务，就是针对手机这种移动连接到互联网的业务或者无线网卡业务而开发的应用程序服务。随着移动智能终端的广泛应用，移动终端正向功能增强化、多模化、定制化、平台开放化的方向发展，而移动终端营销（APP）正式为用户接受度最高的互联网服务平台。多年来，东八区为不同行业、领域的知名企业进行了品牌重塑、网络建设、视频服务与活动策划、展厅展会设计等，东八区深信唯有不断的学习、沉淀、探索、创新，方能给我们的客户交一份满意的答卷。

TAG：企业官网制作
本文由专注于品牌设计 20年的东八区编写,原创不易,转载请注明出处：http://www.dongbaqu.com