2017-12-11今天学的移动端……

原创 moxiao 随笔 个人笔记 207阅读 2017-12-11 22:06:43 举报

首先是开发环境
在电脑上开发,在电脑上模拟
最终测试一定要在真机上测试

    如何使手机访问电脑上所开发的文件

    电脑本地安装虚拟服务器,推荐使用HBuilder编辑

    将127.0.0.1改为当前网络下IP地址并访问

    手机访问该地址即可

    注意:
        1、手机和电脑必须处于同一个网络环境下
            比如:链接同一个WIFI
        2、满足第一步的情况下还不能访问,请关闭系统防火墙
        3、检查本地虚拟服务器

终极目标
使得html宽度时该访问设备的分辨率宽度
与设备宽度一致即可

viewport 适配之视口
width 设备宽度 [pixel_value | device-width]
user-scalable 是否允许缩放 (no||yes)
initial-scale 初始比例
minimum-scale 允许缩放的最小比例
maximum-scale 允许缩放的最大比例

为什么要动态处理像素比?
访问设备是未知的
绝对不能写成固定值

当用户访问时再设置比例

利用JS

框架搭构
固定定位 但是有的设备不不兼容
绝对定位需要始终固定在某一个位置,那么保证这个区域大小不变

将HTML、body高度设为100%,与屏幕宽度一致
将HTML默认的滚动条移除
将滚动条设置给body

    将滚动条设置给body后,在真机上滑动会比较卡

利用JS配合CSS3样式(translate)实现滚动条    

单位选择
当使用1:1像素还原(动态像素比)适配方式时
根据设计图的尺寸选择基调模拟设备
比如:设计图尺寸640,那么选择动态像素比处理后HTML宽度为640的设备

不管设备尺寸如何变化,展示结构不能变化。
根据设备尺寸大小成比例的缩放

px 绝对单位
    在任何情况下都是一样的

    % 相对单位
            在父级【明确的】宽高情况下能求出子集的占位的百分比

   rem  
        r            root
        em        根据字体大小而变化

        根据html的字体大小而变化

要用的话还是需要配合JS
javascript 代码

要好好学习了……加油……

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复