【CSS练习】IT修真院--练习3-简单界面

Nodreame

任务三、 一个最简单的移动端页面

今天完成的事情

  1. 运用布局知识跟随设计图进行布局,完成简单Demo并继续学习优化.
  2. 让布局更好适应屏幕变化(使用了盒模型及百分比).
  3. 了解rem&em&px区别 & 在Demo中应用rem.
  4. 图片处理学习.

明天计划的事情

  • [ ] 深度思考:手机分辨率和网页px的区别(TODO:周末补学)

  • [ ] 任务四计划及简单编写

遇到的问题

  • 暂无

收获

1. 运用布局知识进行更复杂的布局

  • 借助盒模型完成布局

    • 明确目标:完成简单Demo,找出不足继续学习优化,目标效果如下
      目标效果

      • 编码

        • 设计图尺寸为640*1136,于是在浏览器选择相同比例的iPhone5/SE(320*568)进行模拟
        • 新建index.html并编写简单布局div及css,将页面纵向分为topbar&container两个部分, 其中topbar包含着后退按钮,container包含title、content、contact三个部分. 接着通过在PS界面上画参考线方法,简单获得页面各部分比例,并以此为依据完善CSS,效果如下图所示:
          简单效果
        • 在PhotoShop中找到图层工作区,找到将要用到的素材点击右键-快速导出为PNG(由于有素材图所以不需要使用切图工具),并用吸管工具获取背景颜色,再在拾色器(前景色)获取背景色#68cdd6
        • 接下来将图片素材引入index.html中,调整图片长宽
        • 截取效果图GIF的320*650来与当前Demo做对比(吐槽一下这跟PSD图不一样呀=。=)
          修改效果
          对比效果

2. 让布局更好适应屏幕宽度变化

  • 先尝试对刚才写的Demo应用屏幕改变的效果

    • 425px&768px的效果图与现在对比

      • 后退按键与title变化不大
      • container的左右margin过小
      • contacts的顶部margin过小
    • 修改

      • 将container左右margin改为百分比
      • 将context和contacts中间改为margin和padding的组合
      • 结果:基本完成与设计图的重合
        结果

3. 了解rem & em & px & % & vw & wh & vm的区别

  • 参考:

  • 1)px:相对长度单位,相对于屏幕的分辨率.

    • 特点:

      • 优点:稳定 & 精确
      • 缺点:改变浏览器字体大小,布局会被打破
    • 作用:

      • 给定具体大小,协助em和rem重写具体单位
  • 2)em:相对长度单位,相对于当前元素的文本尺寸,如果当前元素文本尺寸未设置则相对于浏览器默认字体尺寸

    • 计算公式:targetEM = 1 / parentPX * targetPX;
    • 特点:

      • 1.em值不固定; 2.会继承父类字体大小
      • 缺点:如果不重新计算已被放大字体的em值的话,各层设置的字体大小复合会导致连锁反应,这个连锁反应是'继承'导致的,想要避免继承的连锁反应可以在目标元素上显式设置px单位的font-size来停止继承.
      • 总结:em对应px的值取决于其使用字体的大小,此字体大小受父类继承过来的大小影响,除非显示重写一个具体单位.
    • 作用:

      • 允许保持在一个特定的设计元素范围内的可扩展性(应在标识清除的情况下使用em单位)
  • 3)rem(root em):相对长度单位,只相对于HTML根元素

    • 特点:

      • 优点:只需修改根元素大小就可以成比例地调整所有字体大小,且避免了字体大小逐层复合的连锁反应,且IE8+的浏览器都支持
      • Tip:为应对不支持的浏览器,可以多写一个绝对单位的声明,例如:
        p {font-size:14px; font-size:.875rem;}
      • 总结:rem对应px的值取决于html元素字体大小,此大小会被浏览器中字体大小的设置影响,除非显示重写一个具体单位.
    • 作用:

      • 保证无论用户如何设置自己的浏览器,布局都能调到合适大小
      • 维护用户拥有自己体验偏好的权利
  • 4)%

    • 特点:

      • 普通元素的百分比定位基于父类.
      • 设置了position: fixed的元素的百分比定位基于浏览器窗体.
      • 设置了position: absolute的元素的百分比定位相对于static定位以外第一个父元素进行定位.
  • 5)vw(viewport width, viewport指的是浏览器内部可视区域大小)

    • 特点:

      • 计算: 1vw = 1% * width_viewport
  • 6)vh(viewport height)

    • 特点:

      • 计算: 1vh = 1% * height_viewport
  • 7)vm(viewport min)

    • 特点:

      • 计算: 1vm = 1% * (width<height?width: height)
  • 实际使用:

    • 元素严格不可缩放时,使用px
    • 一切可扩展都应该用rem, 包括媒体查询
    • 千万不要用em控制字体的大小
    • em用于缩放一些没有默认字体大小的元素,当字体变大整个组件也能随之变大
    • 多列布局用%较好
    • vw、vh、vm做页面排版很厉害,但是兼容做得比较晚,所以优先还是用rem和%解决问题
  • 在task3中应用rem.(已完成)

4. 深度思考

  • 如何从UI图中获取所需信息(使用Photoshop)参考:前端工程师技能之photoshop巧用系列

  • 如何进行自适应网页设计 参考:自适应网页设计(Responsive Web Design)

    • 允许网页宽度自动调整 <meta name="viewport" content="width=device-width, initial-scale=1" />
    • 不使用绝对宽度布局,多用%和auto
    • 字体多用rem
    • 使用流式布局,谨慎使用绝对布局
    • 使用媒体响应
    • 根据屏幕大小加载图片
  • margin和padding使用时机:根据盒模型,padding是盒子内部填充物,margin是盒子与其他物品保持的距离,所以用padding来扩充(撑大)盒子,用margin来保持距离
  • css选择器优先级 参考:优先级-CSS:层叠样式表

    • 从上到下优先级递增:

      • 对优先级无影响:通配符选择器(*) & 关系选择符(+,>,~) & 否定伪类(:not())
      • 类型选择器(h1) & 伪元素(::before)
      • 类选择器(.btn) & 属性选择器(type="radio") & 伪类(:hover)
      • ID选择器(#navbar)
      • 内联样式(style)
      • 覆盖任何声明:!important

效果

系列文章

阅读 2.9k

Nodreame is coding
Web 开发进阶 + 编程通识

伪全栈|前端|前软粉

155 声望
32 粉丝
0 条评论

伪全栈|前端|前软粉

155 声望
32 粉丝
文章目录
宣传栏