简单粗暴的移动端页面开发技能

Gilbertat 发布于2019-08-22 10:48 / 1429人阅读

摘要：移动端响应式页面开发说简单也简单，根据屏幕尺寸调节根字体大小。大宽度用，高度和小宽度全部使用，简单粗暴。之前阅读过大漠老师的使用实现手淘页面的终端适配介绍了手淘项目的制作规范。

移动端响应式页面开发说简单也简单，根据屏幕尺寸调节根字体大小。

大宽度用%，高度和小宽度全部使用rem，简单粗暴。

之前阅读过大漠老师的使用Flexible实现手淘H5页面的终端适配,介绍了手淘项目的H5制作规范。

前端步骤

设置根字体大小:

html:{font-size:100px}

js调节 1rem 对应的px大小

$(document).ready(function() {
    // put all your jQuery goodness in here.
    function adjust(){
      // 设计稿宽度是960px
      var scale = $("body").width() / 960;
      $("html").css("font-size", 100 * scale + "px");
    }
    // 进入、刷新页面时执行函数，调整根字体
    adjust();
    //视口大小调整时执行函数，调整根字体
    // 目测游戏内置页面用不到，用户不会产生resize事件
    $(window).resize(function(){
      adjust();
    });
});

私有云海外云主机移动端页面移动端页面显示移动端html页面移动端开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91298.html

简单粗暴的移动端页面开发技能

摘要：移动端响应式页面开发说简单也简单，根据屏幕尺寸调节根字体大小。大宽度用，高度和小宽度全部使用，简单粗暴。之前阅读过大漠老师的使用实现手淘页面的终端适配介绍了手淘项目的制作规范。移动端响应式页面开发说简单也简单，根据屏幕尺寸调节根字体大小。大宽度用%，高度和小宽度全部使用rem，简单粗暴。之前阅读过大漠老师的使用Flexible实现手淘H5页面的终端适配,介绍了手淘项目的H5制作规...

jeffrey_up 2019-08-30 13:13 评论0 收藏0
个人分享--web前端学习资源分享

摘要：前言月份开始出没社区，现在差不多月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了一般来说，差不多到了转正的时候，会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客，博文推荐分享给大家。 1.前言 6月份开始出没社区，现在差不多9月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了！一般来说，差不多到了转正的时候，会进行总结或者分享会议！那么今天我就...

sherlock221 2019-08-20 18:59 评论0 收藏0
软件测试工程师的技能树

摘要：软件测试工程师是一个历史很悠久的职位，可以说从有软件开发这个行业以来，就开始有了软件测试工程师的角色。很多测试工程师基本上不具备代码的能力，更多是测试的执行者。软件测试工程师是一个历史很悠久的职位，可以说从有软件开发这个行业以来，就开始有了软件测试工程师的角色。随着时代的发展，软件测试工程师的角色和职责也在悄然发生着变化，从一开始单纯的在瀑布式开发流程中担任测试阶段的执行者，到敏捷开...

tinysun1234 2019-05-29 17:10 评论0 收藏0