手记

web前端-响应式网站开发

响应式网站开发

媒体查询

  • 媒体属性
    1. width: 视口宽度
    2. height:视口高度
    3. device-width:渲染表面的宽度,就是设备屏幕的宽度
    4. device-height:设备屏幕的高度
    5. orientation:检查设备处于横向还是纵向
    6. aspect-ratio:基于视口宽度和高度的宽高比
    7. device-aspect-ratio:设备宽高比
    8. color:每种颜色的位数bits如:min-color:16位
    9. resolution:检测屏幕或打印机的分辨率
  • 逻辑操作符
    1. not
    2. and
    3. or
    4. 逗号(,)效果等同于or
    5. only: 防止老旧的浏览器不支持带媒体属性的查询而应用到给定的样式:
      <link rel="stylesheet" media="only screen and (color)" href="example.css" />

(1)加only,老的浏览器不认识,认为media="only",后面css的不会执行,媒体查询不起作用;
(2)不加only,老的浏览器会认识media="media",此时后面的样式会直接执行而忽略了媒体查询条件,可能会导致样式错乱。

建议都加上only

viewport视口

  1. 桌面浏览器只有一个视口,就是主窗口的区域(显示网页内容的区域)
  2. 手机浏览器有三个视口:
    • 布局视口(layout viewport)
      (1)布局视口固定不变,现在的手机移动端基本是980px
    • 可视视口(visual viewport)
      (1)可视视口:手机上显示的网页的视口,缩放会改变可视视口的大小。
    • 理想视口(ideal viewport)
      (1)理想视口就是布局视口在一个设备上的最佳尺寸。通常是我们说的屏幕分辨率
      (2)
      <meta name="viewport" content="width=device-width;initial-scale=1.0;minimum-scale=1.0;maximum-scale=1.0;user-scalable=no;"

      响应式网站设计实践原则

    • 渐进增强
    • 优雅降级
  3. 浏览器的选择
  4. 断电区域性选择
    (1):小屏幕0-480px
    (2):中屏幕481-800px
    (3):大屏幕801-1400px
    (4):高清屏1400px +

如何组织项目目录结构
  • 约定优于配置
  • 约定代码结构或命名规范来减少配置数量

PC端样式

像素

  • px
  • em:相对的长度单位
    1. em 相对参照物为父元素的font-size
    2. 具有继承性的特点
    3. 当没有设置font-size时,浏览器会有一个默认的em设置:1em = 16px;
    4. em的缺点,容易混乱
  • rem
    1. rem的相对参照物为根元素html,由于参照物固定不变所以比较好计算
    2. 当没有设置font-size时,浏览器会有一个默认的rem设置:1rem=16px,这点与em是一致的。
  • 隐藏文字的css技巧,
    .text-hide {
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
    }
    注:该方法的作用是为了优化SEO,比如只想让标题中显示图片,不显示文字,但是为了搜索引擎的优化,又需要在标题中包含文字,那么可以加上text-hide样式来把文字隐藏掉
    <h2 class="text-hide">关于我们<img src="aboutus.png"></h2>
  • 清除浮动
    
    .clearfix:after,.clearfix:before{
    content:"";
    display:table
    }
    .clearfix:after{
    clear:both;
    }
    .clearfix{
    zoom:1;
    }

***
##IDE技巧
***
- Emmet
1. 快捷嵌套 >  +  ^ *  ()
2. div#container.con[data-val] ===>

```html
<div id="container" class="contain" data-val=""></div>

ul>li.item$*5 ===>

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>

ul>li.item${$}*5

<ul>
    <li class="item1">1</li>
    <li class="item2">2</li>
    <li class="item3">3</li>
    <li class="item4">4</li>
    <li class="item5">5</li>
</ul>

lorem20: 20个无意义文本补全

  • webstrom
    1. ctrl + shift + v:打开历史剪贴板,可以复制以前复制过得内容
    2. ctrl + y: 删除当前行 delete line
    3. ctrl+alt+enter: 在代码上面添加一行
    4. ctrl +减号/加号: 折叠/打开代码
    5. ctrl+shift+减号/加号:代码全部折叠或展开
    6. ctrl+退格键:删除当前行
    7. alt+shift+上下键:移动代码
    8. ctrl+m:移动到标签头/尾位置
    9. ctrl+e:最近使用的文件
    10. ctrl+alt+左键:回到上次光标编辑的位置
    11. ctrl+alt+右键:前进到上次光标编辑的位置
    12. shift+光标选中图片地址:代码中预留图片属性
    13. shift+F6:重命名
  • 流行的响应式框架
    1. bootstrap
    2. foundation 结构语义化,可以定制
    3. semantic ui 命名语义化,ui样式比较多
    4. pure.css 轻量级
2人推荐
随时随地看视频
慕课网APP