移动端入门(静态)

原创 lucialiu 随笔 前端基础学习 1622阅读 2017-12-13 00:05:34 举报

这周开始学移动端开发了~

在chrome检查功能做移动端浏览器模拟,在电脑开发了模拟,之后再到真机测试。经过两天明白了pc端和移动端开发的不同点,不同的型号、不同系统的手机有很多差异,主要就是像素比pixel ratio的差异,访问网站的设备是位置的,所以单位不能写成固定值,所以要用适配视口进行计算来达到一比一的还原,做到在不同的移动端能正常展示。
视口vewport:
设备宽度width [pixel_value] [device-width]
是否允许用户缩放user-scalable no|| yes
初始比例initial-scale
最小比例 minimum-scale
最大比例maximum-scale

计算求像素比的js(老师给的,还没有开始学js不怎么看得懂):
<script>
// 获取像素比
var dpr = window.devicePixelRatio;
// 计算缩放比例
var ratio = 1 / dpr;
//将求出比例写入viewport
document.write('<meta name="viewport" content="width=device-width,initial-scale='+ratio+',minimum-scale='+ratio+',maximum-scale='+ratio+',user-scalable=no" />')

        //获取屏幕宽度
        var dWidth = document.documentElement.clientWidth / 10;
        // 计算公式: 屏幕宽度 / 10 = html字体大小
        var html = document.getElementsByTagName('html')[0];
        html.style.fontSize = dWidth + 'px';
    </script>

win10用云压 、winrar、 好压都会解压出来乱码,经过跟压缩软件的斗争,终于安装并且会使用koala写代码,方便了很多,但还是不熟练,眼睛初近视并且眼睛疼,跟压缩软件羁绊完,下午就做了一点点的iqiyi的APP首页,上个截图

移动端入门(静态)

晚安~

评论 ( 7 )
最新评论
903786831z 2017-12-20 08:53:21 7F

$(function() {
//控制字体
var calculate_size = function() {
var BASE_FONT_SIZE = 100;
var docEl = document.documentElement,
clientWidth = docEl.clientWidth;
if (!clientWidth) return;
size = BASE_FONT_SIZE * (clientWidth / 750) ;
docEl.style.fontSize = size + 'px';
if(size>56){
size = 56;
docEl.style.fontSize = size + 'px';
}
};

// 如果浏览器不支持addEventListener,则中止
if (document.addEventListener) {
var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
window.addEventListener(resizeEvt, calculate_size, false);
document.addEventListener('DOMContentLoaded', calculate_size, false);
calculate_size();
}
});

可以使用rem布局

lucialiu 5F 2017-12-15 22:33:54 6F

koala是跟Hbuilder配合使用的软件,可以用Hbuilder通关过koala辅助用less文件自动生成css文件,就不用再那么麻烦的写包含选择器了

lawrence 2017-12-15 20:07:12 5F

koala是编辑器么?你怎么找到它的?

lucialiu 3F 2017-12-15 18:55:44 4F

之前非常喜欢心算,学了前端开始都不相信自己了,就怕算错,都会用计算器再算一下

li247163569 2017-12-14 10:35:32 3F

你真棒,牵涉到计算,我都懒得想

lucialiu 1F 2017-12-13 23:35:47 2F

谢谢,请多指教

17317830002 2017-12-13 11:46:47 1F

点个赞