发表于 | 分类于 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>demo</title>
    <style>
        *{margin: 0;padding: 0;}
        .box{
            width: 100%;
            height: 500px;
            box-sizing: border-box;
            border: 5px solid #000;
        }
        .left{
           width: 100px;
           height: 100px;
           background: red; 
           float: left;
        }
        .middle{
            width: 100%;
            height: 100px;
            background: blue;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="middle"></div>
    </div>
</body>
</html>
  1. 当 .left 浮动时：
    • db按照原来一样的布局，但是文字会被挤压，不适合用于居中。
    • dib会被.left挤出来，当dib宽度不够另起一行，db不会。

发表于 | 分类于

1.设计图

在此只是给出前端目前流行的解决方案，并不涉及专业的UI知识，如有错误，欢迎指正。

1.1 flexible布局

手机布局目前很多网页遵循手淘的flexible布局，简而言之就是网页的视图随着屏幕的比例放大缩小，可以参考如下链接

手机淘宝网 ，顺德青企协APP

image

放在大屏幕下（实际这类网页只适应手机屏幕，在此只是拿出来当个例子）：

image

1.2 UI设计的时候怎么参考这类网页

上面的知识UI可以了解下，当然，这不是重点，兼容是前端的事。下面的才是重点！！

1.2.1 设计图比例

手淘设计师常选择iPhone6作为基准设计尺寸，交付给前端的设计尺寸是按750px * 1334px为准(高度会随着内容多少而改变)。

建议 UI设计图参考上述比例，但也可以不必遵循，可根据你们的手机做参考。（比如你的手机分辨率如果是1080 1920，那么你的设计图也可参考你的手机为1080px1920px）。

1.2.2 如何参考

实际上手机的显示跟电脑上是有区别的，

如何在ps里参考网上网页中设计元素（字体图像）的大小，
我的一个建议是拿出你们的==手机截屏==，==要把网页充满手机全屏再截图==，然后放到电脑上在ps里面去测量。

比如，你的手机是i6（i7，i8），那么你的设计图比例就做成750px*1334px（高度不定），你所需要填充的字体元素，图像元素，行高，图标大小，可以参考网上一些网站的设计。形成自己的一套标准。检查的时候也可以把设计图传给手机全屏看看效果怎么样。

如果你的手机是i6p( 7p 8p),那么你的设计图比例就做成1080px*1920px（高度不定），你所需要填充的字体元素，图像元素，行高，图标大小，可以参考网上一些网站的设计。形成自己的一套标准。检查的时候也可以把设计图传给手机全屏看看效果怎么样。

如果需要测试机也行，找珊姐借i6。

另外一种方式是通过浏览器的调试窗口来测量，不过这种方式需要转化计算，在此就不演示了，如果需要可以找我。

1.3 关于字体的题外话

实际上，在ps里的字体大小跟在网页上显示是不一样的，具体情况可以看下我这个提问。

所以，之前UI设计的时候，在图片上标明的字体大小，前端需要精准还原的时候不会只参考设计图上的标注。

另外，UI设计的时候，选择什么字体可以参考网上一些网站的风格。

image

1
2
3
微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif

这里的意思是，字体选择的优先顺序，如果用户的电脑有微软雅黑字体（windows电脑），那么这个字体就显示成微软雅黑，如果用户的电脑没有微软雅黑字体，那么这个字体就选择下一个字体"Helvetica Neue"，如果再没有的话，就再一次选择下面的字体。

额，这是我第一次做分享，也是我个人的经验之谈，如果有问题，欢迎与我探讨，谢谢！–泽鑫

发表于 | 分类于

image

http://placekitten.com/350/200

1
2
3
4
5
6
7
8
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png',
  loading: 'dist/loading.gif',
  attempt: 1,
  // the default is ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend']
  listenEvents: [ 'scroll' ]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<script>
export default {
  data () {
    return {
      imgObj: {
        src: 'http://xx.com/logo.png',
        error: 'http://xx.com/error.png',
        loading: 'http://xx.com/loading-spin.svg'
      },
      imgUrl: 'http://xx.com/logo.png' // String
    }
  }
}
</script> 
 
<template>
  <div ref="container">
     <img v-lazy="imgUrl"/>
     <div v-lazy:background-image="imgUrl"></div>
 
     <!-- with customer error and loading -->
     <img v-lazy="imgObj"/>
     <div v-lazy:background-image="imgObj"></div>
 
     <!-- Customer scrollable element -->
     <img v-lazy.container ="imgUrl"/>
     <div v-lazy:background-image.container="img"></div>
 
    <!-- srcset -->
    <img v-lazy="'img.400px.jpg'" data-srcset="img.400px.jpg 400w, img.800px.jpg 800w, img.1200px.jpg 1200w">
    <img v-lazy="imgUrl" :data-srcset="imgUrl' + '?size=400 400w, ' + imgUrl + ' ?size=800 800w, ' + imgUrl +'/1200.jpg 1200w'" />
  </div>
</template>

发表于 | 分类于

*号破坏了继承关系

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			font-size: 50px;
		}
		// 相当于给所有标签加上font-size: 50px;
		div{
			font-size: 12px;
			//  这里p并不会继承div字体大小样式
		}
	</style>
</head>
<body>
	<div>
		<p>六朵金花分类电脑代理费</p>
		fjdljfld fl
		年发电量了回来的了
	</div>
</body>
</html>

image

发表于 | 分类于

title: 24-关于flexible的探讨
date: 2018-05-03 10:05:30
categories: 前端-01-切图CSS

tags: 前端-01-切图CSS

首页，先给出原文出处,点击查看

最近看移动端1px的问题，由此联想到项目中使用的rem布局方案，先说说引入手淘flexible要注意的地方。

1. 加不加 viewport 标签

1.1介绍

1
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

对于这个问题，大漠（文章的作者）这样说，
image
查看原图

image
查看原图

加不加viewport，在iPhone6下分别看下他们的情况

1
2
3
<html data-dpr="2" style="font-size: 75px;"><head>
...
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

如果加了viewport 标签

1
2
3
<html data-dpr="1" style="font-size: 37.5px;">
...
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

二者效果我感觉是一致的，因为不加viewport标签下，initial-scale=0.5（缩放0.5），会帮你还原跟<html data-dpr="1" style="font-size: 37.5px;">一样。

文章作者意思好像是为了做到高清。

1.2 ios动态设置dpr带来的问题

由于ios动态设置了dpr，带来了initial-scale的变化，这意味着，如果我们想在css里使用

1
div{width:200px;height:200px}

在苹果下会缩放，

image

查看原图

image

查看原图

我们需要对不同dpr下做适配

1
2
3
4
5
6
7
8
9
10
11
12
div { 
    width:200px;
    height:200px
} 
[data-dpr="2"] div { 
    width:400px;
    height:400px
} 
[data-dpr="3"] div { 
    width:600px;
    height:600px
}

作者给了一个字体设置的sass混合宏，

1
2
3
4
5
6
7
8
9
10
11
@mixin font-dpr($font-size){
    font-size: $font-size;
    
    [data-dpr=\"2\"] & {
    font-size: $font-size * 2;
    }
    
    [data-dpr=\"3\"] & {
    font-size: $font-size * 3;
    }
}

1.3分割线

为了避免这样的匹配，==感觉还是加个viewport吧==，不用去匹配[dpr=2][dpr=3]，而且必企的项目里有加，也没产生多大影响，@2x的图片也可以做到高清。==也不用为后面的1px分别匹配。==

注：切图也可以在ps里精准量测，然后转rem，上次估计是效果图原因。

2. 移动端 1px 问题

移动端1px变粗的原因

viewport的设置和屏幕物理分辨率是按比例而不是相同的. 移动端window对象有个devicePixelRatio属性, 它表示设备物理像素和css像素的比例, 在retina屏的iphone手机上, 这个值为2或3, css里写的1px长度映射到物理像素上就有2px或3px那么长.

也就是罪魁祸首就是设备像素比（window.devicePixelRatio），即：

设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。

例子可看必企底部栏border-top

image

查看原图

image

查看原图

参考网上链接1 网上链接2

我写了个@mixin，仅供参考

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
@mixin onepx($position: bottom, $color: #666, $radius: 0) {
  @media only screen and (-webkit-min-device-pixel-ratio: 2) {
    & {
      border: none;
      position: relative;
      // box-sizing: border-box;
      @if $position=='bottom' {
        &:after {
          content: '';
          position: absolute;
          bottom: 0;
          right:0;
          width: 100%;
          height: 1px;
          background: $color;
          border-radius: $radius;
          -webkit-transform: scaleY(0.5);
          transform: scaleY(0.5);
          -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
        }
      }
      @else if $position=='top' {
        &:after {
          content: '';
          position: absolute;
          top: 0;
          right:0;
          width: 100%;
          height: 1px;
          background: $color;
          border-radius: $radius;
          -webkit-transform: scaleY(0.5);
          transform: scaleY(0.5);
          -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
        }
      }
      @else if $position=='right' {
        &:after {
          content: '';
          position: absolute;
          right: 0;
          top: 0;
          bottom:0;
          width: 1px;
          height: 100%;
          background: $color;
          border-radius: $radius;
          -webkit-transform: scaleY(0.5);
          transform: scaleY(0.5);
          -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
        }
      }
      @else if $position=='left' {
        &:after {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          bottom:0;
          width: 1px;
          height: 100%;
          background: $color;
          border-radius: $radius;
          -webkit-transform: scaleY(0.5);
          transform: scaleY(0.5);
          -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
        }
      }
      @else if $position=='all' {
        &:after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          border: 1px solid $color;
          // -webkit-box-sizing: border-box;
          // box-sizing: border-box;
          width: 200%;
          height: 200%;
          border-radius: $radius;
          -webkit-transform: scale(0.5);
          transform: scale(0.5);
          -webkit-transform-origin: left top;
          transform-origin: left top;
          pointer-events: none;
        }
      }
    }
  }
}

后话：目前项目还是使用scss为主，如果等以后前端项目成熟了，再考虑换post-css，前端实在折腾~~

发表于 | 分类于 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
li{
	width: 100px;
	height: 46px;
	line-height: 46px;
	text-align: center;
	font-size: 14px;
	span{
		display: inline-block;
		vertical-align: middle;
		line-height: 16px;
	}
	i{
		display: inline-block;
		height: 100%;
		vertical-align: middle;
	}
}

image

发表于 | 分类于

链接

1.BFC布局规则：

  • 内部的Box会在垂直方向，一个接一个地放置。
    -Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
  • 每个元素的margin box的左边， 与包含块border - - box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
  • BFC的区域不会与float box重叠。
  • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
  • 计算BFC的高度时，浮动元素也参与计算

二、哪些元素会生成BFC?

  • 根元素
  • float属性不为none
  • position为absolute或fixed
  • display为inline-block, table-cell, table-caption, flex, inline-flex
  • overflow不为visible

三、BFC的作用及原理

    1. 自适应两栏布局
    1. 清除内部浮动

发表于 | 分类于

1.padding百分比

问题：当margin-top、padding-top的值是百分比时，分别是如何计算的？

  • A 相对父级元素的height，相对自身的height
  • B 相对最近父级块级元素的height，相对自身的height
  • C 相对父级元素的width，相对自身的width
  • D 相对最近父级块级元素的width，相对最近父级块级元素的width

可以对元素的margin设置百分数，百分数是相对于父元素的width计算，不管是margin-top/margin-bottom还是margin-left/margin-right。（padding同理）

如果没有为元素声明width，在这种情况下，元素框的总宽度包括外边距取决于父元素的width，这样可能得到“流式”页面，即元素的外边距会扩大或缩小以适应父元素的实际大小。如果对这个文档设置样式，使其元素使用百分数外边距，当用户修改浏览窗口的宽度时，外边距会随之扩大或缩小。

2.css中如何规定某一元素高度等于其宽度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style type="text/css">
#container {
    width: 80%;
    height: 500px;
}

.attr {
    width: 50%;
    height: 0;
    padding-bottom: 50%;
    background-color: #008b57;
}
</style>



<div id='container'>
    <div class='attr'></div>
</div>

codepen

发表于 | 分类于

link

回流与重绘

  1. 当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。

  2. 当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

注意：回流必将引起重绘，而重绘不一定会引起回流。