08_实战

最新推荐文章于 2024-05-19 21:23:39 发布

lambo mercy

最新推荐文章于 2024-05-19 21:23:39 发布

阅读量71

点赞数

分类专栏：前端文章标签： html 前端

本文链接：https://blog.csdn.net/m0_65601072/article/details/127332267

版权

前端专栏收录该内容

27 篇文章 3 订阅

订阅专栏

项目目录

less/
css/
images/
uploads/
js/
lib/
favicon.ico
index.html

移动适配

1、less 中使用 rem

// 根字号基量基于375px的设计图
@rootSize: 37.5rem;

.box {
  // px => rem
  width: (50 / @rootSize);
}

2、less 中使用 vw

/* 根字号基量基于375px的设计图 */

@vw: 3.75vw;

.box: {
  width: (80 / @vw);
}

base.css:

/* base.css */
/* 部分代码参考reset.css */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
   
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

body, html {
    height: 100%
}

body{
   font-family: Helvetica Neue,Tahoma,Arial,PingFangSC-Regular,Hiragino Sans GB,Microsoft Yahei,sans-serif;
   line-height: 1;
   font-size: 16px;
   color: #222;

   text-rendering: optimizeLegibility;
   -webkit-text-size-adjust: 100%;
   -webkit-font-smoothing: antialiased;
   -webkit-tap-highlight-color: rgba(0,0,0,0);
}


a {
    color: inherit;
    cursor: default;
    text-decoration: none
}

img{
    width: 100%;
    height: 100%;
    vertical-align: middle;
}

ol, ul{
    list-style: none
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* 单行文本溢出 */
.ellipsis-1{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 多行文本溢出 */
.ellipsis-2{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}