响应式网站设计心得

quick start
媒体查询
开发页面

**响应式网站一招致胜 学习心得**

代码改变世界

quick start

ethan marcotte

浏览器市场占有率统计

caniuse https://caniuse.com/

工具测试canius支持度： https://www.jianshu.com/p/61ab19b627a1

statecounter http://gs.statcounter.com/

媒体查询

css2开始 media媒体查询出现

<link rel="stylesheet" type="text/css" href="xxx.css" media="screen">

css3增强媒体查询

媒体类型

函数


@media all and ( min-width:800px) and (orientation:landscape){

    ...

}

all 可省略（默认）
screen
print
and
or | ，
not
only 老的设备上不识别就带上

css 媒体属性介绍

width 视口宽度
height 视口高度
device-width 渲染表面宽度就是设备屏幕宽度
device-height 渲染表面高度就是设备屏幕高度

以上属性都可以添加min- max- 前缀
orientation 设备处于横向还是纵向
aspect-ratio 基于视口的宽高比
device-aspect-ratio 渲染表面的宽度就是设备屏幕宽度
color 每种颜色的位数 bits 。 min-color ：16位，8位
resolution 检测屏幕|打印机分辨率

viewport 3种视口

布局视口 960px
可视视口设备宽度
理想视口把布局视口等于可是视口就是理想视口

开发一个网站准备

思考：

解决什么？
受众是谁？
如何呈现？
如何组织？

前期step：

需求分析
原型设计
UI设计

开发页面

html5 不区分大小写单双引号

<!doctype html>

head中编码 utf-8

IE兼容性：

IE能识别的脚本:

<!--[if lte IE8]>

<p>你的浏览器太老了，请  <a href="https://browsehappy.com/">更新</a></p>

<![endif]-->

不同浏览器下载地址

https://browsehappy.com/
html 大纲生成页面

http://gsnedders.html5.org/outliner/

UI页面结构书写

分析设计图写出页面结构

顺便添加class属性名，为后续class样式做准备

注意类似递归的方式去写结构 大到小 外到内
重置样式 reset.css normalize.css

http://necolas.github.io/normalize.css/

这里我们现在都一般直接使用normalize.css

在此基础上进行一些覆盖
px em rem 单位

设置 rem 相对好些 html {font-size: 62.5%} 后 1rem = 10px

注意：rem有兼容问题 gte IE8
清除浮动

作用： float后父级元素高度塌陷（没了高度为0），设置这个清楚浮动，高度可以回来（即撑起来高度）

只要是触发了BFC后，都可以清除浮动。

触发BFC可以动过一下几个属性：
- float:
- overflow:auto;
- overflow:hidden;
- display:table-cell ;
- display: table-...
- position : fixed;
- postion: absolute;

经典清除使用伪代码方式：

  .clearFix:before,

  .clearFix:after{  

           content:'  ’;

          clear:both;

          display:block;

          height:0;

          overflow:hidden

        

  }

  clearFix{
      zoom:1;
  }

也可以简写成如下：

  .clearFix:before,

  .clearFix:after{  

        content:'  ’;

       display:table;

  }



.clearFix:after{

     clear:both;

}

  clearFix{
      zoom:1;
  }

flex 替代 float

display:flex 替代 float
2018 front-end趋势

https://frontendmasters.com/books/front-end-handbook/2018/

兼容的前缀自动添加

http://autoprefixer.github.io/
精灵图 sprit，设置小图背景

好处是请求一次就拿到一张图然后再根据background-position进行定位设置宽度|高度
- background-image
- background-position
- widht | height
- background-size
li 浮动后的几个li间距问题修正
- 父元素font-size:0
- margin-left：-3px

行级标签宽度设置

display:inner-block;

width:10%;

color:red;

font-size:1rem;

line-height:1.5;

padding:0.5rem;

text-aling:center;

text文本超出截断

overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;

计算函数calc

width: calc(33.33333% - 1rem);
.item + .item 兄弟元素
```
.feature .item + .item {
     margin-left: 1.5rem;
 }
```
+ 比如 li 中是否包含.item的兄弟元素

这种方式一般都是设置除第一个外的其他兄弟元素

滤镜 filter

对背景颜色进行滤镜

background: url('../img/[email protected]') no-repeat left;
-webkit-filter: grayscale(100%);

filter: grayscale(100%);

rgba 透明度

background: rgba(0,0,0,0.6)

对背景颜色进行opacity透明度控制不对字体影响

若字体也有透明度要用color:#000;opactiy: 0.6

响应式网站设计心得

quick start

媒体查询

开发页面

猜你喜欢