响应式网站设计心得

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

代码改变世界

目录

quick start

ethan marcotte

响应式提出

响应式原文翻译

响应式原文翻译2

响应式豆瓣原文翻译

响应式豆瓣原文翻译2

浏览器市场占有率统计

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

  • 可视视口 设备宽度

  • 理想视口 把布局视口等于可是视口就是理想视口

开发一个网站准备

思考：

  1. 解决什么？
  2. 受众是谁？
  3. 如何呈现？
  4. 如何组织？

前期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/logo@1x.png') no-repeat left;
-webkit-filter: grayscale(100%);

filter: grayscale(100%);

  • rgba 透明度

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

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

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

posted on 2019-02-25 16:37  sidney.sun  阅读(216)  评论(2)  编辑  收藏  举报

导航