webapp的架构方式

最新推荐文章于 2024-05-15 01:21:29 发布

Razas

最新推荐文章于 2024-05-15 01:21:29 发布

阅读量958

点赞数

分类专栏： JavaScript 文章标签： webapp

本文链接：https://blog.csdn.net/qq_25354709/article/details/84032706

版权

JavaScript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

一、构建REM

一般设计稿的宽度，使用640px，那么字体14px 就可以写成 .28rem 。而header高度44px 可以写成 .88rem。

html 的 font-size 设为100px，是因为浏览器最小为12px，设为10px的话，会不准确。

index.less

@import (reference) "public"; /*-- reference 表示只把public里面的东西拿过来用，不进行编译 --*/

html {
  font-size: 100px;
}

html, body {
  width: 100%; /*-- height:100%; 不用写，如果写了，表示只用这一屏 --*/
  overflow-x: hidden;

  color: extract(@colorList, 1); /*-- 找到@colorList中的第一个颜色 #555 --*/
  background: extract(@colorList, 3); /*-- #EBF0F5 --*/
}

a, a:active, a:visited, a:hover, a:target {
  display: block;
  color: extract(@colorList, 1);
}

/*-- 最外层边框, 宽度用js去控制。超过640px时，让它宽度固定在640px --*/
.main {
  margin: 0 auto;
  max-width: 6.4rem;
}



/*-- HEADER --*/

/*-- CONTENT --*/

/*-- FOOTER --*/

public.less

/*-- 公共颜色, 包含当前项目的所有颜色值 --*/
@colorList: #555, #999, #EBF0F5, #FFF, #1C90F2, #F82D2D;

/*-- 公共图片路径 --*/
@url: '../images';

/*-- 动画 --*/
.transition (@property:all, @duration:1s, @time-function: linear, @delay: 0s) {
  -webkit-transition: @arguments;
  transition: @arguments;
}

index.html


<body>

<!-- 所有内容都放在.main这个容器内容 -->
<section class="main" id="main">

    <!-- HEADER -->
    <header class="header"></header>

    <!-- BANNER -->
    <section class="banner"></section>

    <!-- CONTENT -->
    <section class="content"></section>

    <!-- FOOTER -->
    <footer class="footer"></footer>
    
</section>

</body>

//-> 动态设置REM
~function () {
    var desW = 640,  //设计稿宽度
        winW = document.documentElement.clientWidth || document.body.clientWidth;  //屏幕宽度
    //如果屏幕宽度大于设计稿的宽度
    if (winW > desW) {
        $('.main').css('width', desW);
        //或者
        //document.getElementById('main').style.width = desW + 'px';
        return;
    }
    //设置整个页面的HTML的font-size值
    document.documentElement.style.fontSize = winW / desW * 100 + 'px';
}();

Razas

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webapp的架构方式

一、构建REM一般设计稿的宽度，使用640px，那么字体14px 就可以写成 .28rem 。而header高度44px 可以写成 .88rem。html 的 font-size 设为100px，是因为浏览器最小为12px，设为10px的话，会不准确。index.less@import (reference) "public"; /*-- reference 表示只把publ...
复制链接

扫一扫

专栏目录