页面布局整理（基于scss）

时间 2019-11-13

标签页面布局整理基于 scss 繁體版

原文原文链接

页面开发步骤：css

一、全局reset、设置基础背景色、设置基础字体样式html

二、全局布局页面结构,meta 标签引入vue

三、按钮等相同的样式，用scss提早写好一份公用,渐变等 border-radius box-shadow ,水平垂直居中html5

四、兼容的样式，提早写好scss,统一引用ios

五、盒子模型，怪异型(border-box)和标准型(content-box)css3

六、移动端若是须要识别二维码web

全局reset、设置基础背景色、设置基础字体样式

统一reset

// 方案一：
*{
  margin: 0;
  padding: 0;
  outline: none;
}
body {
  background-color: #f8f8f8;  //基础背景色
  font: 14px/1.5 "微软雅黑","Microsoft YaHei",宋体"; //基础字体样式
  color: #7d7d7d; //基础字体颜色
  position:relative;
}
// 去掉常见标签的基础样式
// 去掉a标签样式，并继承父级颜色
a {
  cursor: pointer; 
  color: inherit;
  display: inline-block;
  text-decoration: none;
}
ul,li { 
  list-style-type: none;
}
input {
  outline: none;
  -webkit-apperance: none; // 去掉ios输入框内部阴影
}
.div {
-webkit-user-select: none;// 移动端禁止选中内容
}

/*去掉点击时出现的黑色阴影*/
a,input,button {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

// 移动端取消touch高亮效果
a {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

// 方案二：
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img{
  margin:0;
  padding:0;
  border:0;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
body{
  color:#333; 
  font-size:16px;
  font: 14px/1.5 "微软雅黑","Microsoft YaHei",宋体"; //基础字体样式
}
ul,li,ol{
 list-style-type:none;
}
select,input,img,select{
  vertical-align:middle;
}
input{
  font-size:12px;
}
a{ 
  text-decoration:none;
  outline:none;
}
.clear{
  overflow:hidden;
}
p,li{ 
  letter-spacing: 1px;
}
img{
  display:block;width:100%;
}

// 移动端css（若是有二维码的多图页面）

// 一、若是直接将图片暴露在最外面，点击图片，会出现图片直接全屏显示，禁止移动端图片的点击事件，用下面的css，兼容性  ie11+
// 二、若是引入的图片较多，同时又有二维码须要长按识别，能够将图片全局设置成none, 其中二维码图片的img  设置成auto;
img {
    pointer-events: none; // auto默认值
}
.img-no-click {
    pointer-envents: none;
}

全局布局页面结构

页面常见布局

pc

.layout {
  width: 110px;
  margin: 0 auto;
}

// 左右浮动
.fl { 
  float: left;
}
.fr { 
  float: right;
}
// 经常使用清除浮动
.clearfix:after {
  content:"."; 
  display:block; 
  height:0; 
  visibility:hidden; 
  clear:both;
}
.clearfix { 
  *zoom:1;
}

// 多行文本溢出
.div{
  display:-webkit-box !important;
  overflow:hidden;
  text-overflow:ellipsis;
  word-break:break-all;  
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;(数字2表示隐藏两行)
}

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

// 统一怪异盒子模型
.border-box { 
  box-sizing: border-box;
  -webkit-box-sizing: 
  border-box;
  -moz-box-sizing: border-box;
}

// 统一标准盒子模型
.content-box { 
  box-sizing: content-box;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
}

添加相关的meta 标签

<!--必须加载-->
<meta charset='utf-8'>
<meta name="keywords" content="html5,css3,vue,axios,vuex"> <!-- 关键词 -->
<meta name="description" content="hzzly,xyy-vue"> <!-- 网站内容描述 -->

<!--按需添加-->
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">  <!--移动端-->

<meta name="format-detection" content="telephone=no, email=no"> <!--忽略页面中数字格式和邮箱格式识别为电话号码和邮箱-->

<meta http-equiv="Cache-Control" content="no-siteapp"/>  <!--禁止百度快照缓存-->

<meta name="renderer" content="webkit">  <!-- 启用360浏览器的极速模式(webkit) -->
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">  <!-- 优先使用 IE 最新版本和 Chrome -->

<meta name="screen-orientation" content="portrait"><!-- uc强制竖屏 -->
<meta name="browsermode" content="application"><!-- UC应用模式 -->
<meta name="full-screen" content="yes"><!-- UC强制全屏 -->

<meta name="x5-orientation" content="portrait"><!-- QQ强制竖屏 -->
<meta name="x5-fullscreen" content="true"><!-- QQ强制全屏 -->
<meta name="x5-page-mode" content="app"><!-- QQ应用模式 -->

<meta name="apple-mobile-web-app-capable" content="no"><!--删除默认的苹果工具栏和菜单栏。yes为显示工具栏和菜单栏-->

<input type="text" autocapitalize="off" /><!--关闭iOS键盘首字母自动大写-->

按钮等通用样式,精简css,(scss)

// 按钮
@mixin btn-style($width, $height, $fontSize, $color, $backgroundColor ) {
  width: $width;
  height: $height;
  display: block;
  text-align: center;
  line-height: $height;
  font-size: $fontSize;
  color: $color;
  background: $backgroundColor;
  opacity: 0.9;
  &:hover {
    opacity: 1;
  }
}

// 定义三角形
/* 方向 三角的宽度 三角的颜色 */
@mixin arrow($direction, $width, $color) {
    width: 0;
    height: 0;
    line-height: 0;
    border-width: $width;
    border-style: solid;
    @if $direction == top {
        border-color: transparent transparent $color transparent;
        border-top: none;
    }
    @else if $direction == bottom {
        border-color: $color transparent transparent transparent;
        border-bottom: none;
    }
    @else if $direction == left {
        border-color: transparent $color transparent transparent;
        border-left: none;
    }
    @else if $direction == right {
        border-color: transparent transparent transparent $color;
        border-right: none;
    }
}
// 使用
<div class="trangle"></div>
.trangle {
    @include arrow(bottom, 10px, #f00)
}

// css 公用
.errtxt {
    width: 1100px;
    height: 200px;
    border: 1px solid #ccc;
}
// 引用
.box {
    color: #999;
    @extend .errtxt;
}

兼容早定义

// 圆角兼容
@mixin border-radius {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

// 从上到下渐变
@mixin gradient($startColor, $endColor) {
    background: -moz-linear-gradient(top, $startColor 0%, $endColor 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $startColor), color-stop(100%,$endColor));
    background: -webkit-linear-gradient(top, $startColor 0%,$endColor 100%);
    background: -o-linear-gradient(top, $startColor 0%,$endColor 100%);
    background: -ms-linear-gradient(top, $startColor 0%,$endColor 100%);
    background: linear-gradient(to bottom, $startColor 0%,$endColor 100%);
}

// 从左到右渐变
@mixin gradient($startColor, $endColor) {
  background-image: -moz-linear-gradient(left, $startColor 0%, $endColor 100%);
  background-image: -webkit-gradient(linear, left top, right top,color-stop(0%,$startColor, color-stop(100%,r$endColor;
  background-image: -webkit-linear-gradient(left, $startColor 0%,$endColor 100%);
  background-image: -o-linear-gradient(left, $startColor 0%,$endColor 100%);
  background-image: -ms-linear-gradient(left, $startColor 0%,$endColor 100%);
  background-image: linear-gradient(to right, $startColor 0%,$endColor 100%);
}

// 放大
@mixin scale($scale){
  -webkit-transform: scale($scale);
  -ms-transform: scale($scale);
  -o-transform: scale($scale);
  transform: scale($scale);
}

// 引用：
.notice {
  background:#fff;
  @include border-radius;
}

不定宽高的水平垂直居中

//方法： 父元素相对定位，子元素绝对定位
//html结构

<div class="box">
  <div class="child"></div>
</div>

//css

/* 方法一 */
.box {
    width: 300px;
    height: 300px;
    position: relative;
    background: #ccc;
}
.child {
    width: 100px;
    height: 100px;
    position: absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin: auto;
    z-index: 10;
    background:#ff0;
}

/* 方法二 */
.child {
    width:100px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    z-index:3;
    -webkit-transform:translate(-50%, -50%);//兼容性ie10+
    background:#ff0;
}
/* 方法三 */
.child {
    width:100px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    z-index:3;
    margin-left: -50px;
    margin-top: -50px;
    background:#ff0;
}

/* 方法四 */
.box {
   justify-content:center; //子元素水平居中，
   align-items:center; //子元素垂直居中;
   display: -webkit-flex;  /* 新版本语法: Chrome 21+ */
   display: flex;          /* 新版本语法: Opera 12.1, Firefox 22+ */
   display: -webkit-box;   /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
   display: -moz-box;      /* 老版本语法: Firefox (buggy) */
   display: -ms-flexbox;   /* 混合版本语法: IE 10 */  
}

以上前三种方法都是利用绝对定位处理。第四中方法是flexvuex

## rem布局写法

// 给html基础像素
function init(){
    var fontSize = document.documentElement.clientWidth;
    document.body.parentNode.style.fontSize = fontSize +'px';
}
init();

$basePx:750;// 设计图像素750*x
@function pxCount($px){
  @return $px/$basePx+rem;
}