html5+css3

  • 2019-05-14更新

    1.为什么设置font-size=62.5%

    简单说下为什么要来更新这篇博客的原因吧。这篇博客计算rem的方式是自己2014年刚毕业的时候做移动端项目写的。本身这段代码没有什么问题,但是在本地开发调试(比如chrome上) 因为设置 html 根元素的font-size=62.5% 导致在chrome上使用了rem单位的容器计算出来的正常的尺寸会有偏差(实际上在移动端设备上显示的又没有问题)。

    这个问题的主要原因就是在pc上默认浏览器的字体最小只能显示 12px大小的字体**(当然这个说法也是指的大多数浏览器)。所以当使用这篇博客脚本的来做rem 的动态计算的时,如果

  • 前言:

    看了下博客的更新时间,发现9月份一篇也没有更新。一直想着都要抽时间写一篇的,不然今年的更新记录就会断在了9月份。但是还是应为各种各样的事情给耽搁了。当内心突然涌起一股必须写点什么的时候,突然发现自己把写博客的“套路”都忘了。(●´ω`●)φ

    一直认为自己还是一个比较热爱思考的人。最近一直在思考两个问题:

    1. 自己做技术的初衷;
    2. 自己的技术成长之路;

    当然这两篇文章自己也在润色之中,相信很快会跟大家见面。

    废话不多说。来正菜。

    1.背景色与透明度相关知识

    好吧。至从自己到了新的工作环境以后,开发环境又从只需要兼容 IE8 以上回到了必须兼容 IE6 浏览器上来。所以在第一次做项目的时候,

  • 1.移动端开发视窗口的添加

    h5端开发下面这段话是必须配置的

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

    其它相关配置内容如下:

    • width viewport 宽度(数值/device-width)
    • height viewport 高度(数值/device-height)
    • initial-scale 初始缩放比例
    • maximum-scale 最大缩放比例
    • minimum-scale 最小缩放比例
    • user-scalable 是否允许用户缩放(yes/n
  • 前言

    这篇文章的内容如题目一样,主要分为两个部分,

    1. 谈谈业内主流的移动端适配解决方案
    2. 点5像素的由来和实现方法

    建议在读这篇文章的时候先读下这篇文章《高清屏概念解析与检测设备像素比的方法_20161005》,因为这些文章涉及的很多概念在这篇文章中都会提到。

    1.再谈移动端适配

    1.1百分比解决方案的缺点

    在我们的项目中大量的使用百分比来解决页面在宽度上的自适应,其实在高度上并没有很好的自适应。所以在我们的前端页面会出现一些比较奇怪的问题。比如下面这样:

    还有一个比较明显的问题就是:在任何机型上我们的按钮的高度是不会变化自适应的,所以小屏手机我们的按钮看起来很臃肿。

    1.2一些常用单位的概

  • 之前写过两篇开发中遇到的问题和解决方案。当时是CSS 和 JavaScript 分开写的。现在写这篇文章的时候感觉很多内容都是有内在联系的,所以不好分开。

    给大家分享一下这半年来的感受吧:

    知道和理解之间是有很大距离的。别人谈到一个知识点,能接上嘴并且能发表一下自己的意见,这叫知道。遇到问题能够想到用什么知识点解决问题,这叫理解。

    所以有很多知识点自己确实在书上都看到过但是在平时遇到问题的时候却不知道怎么去用或者说想到去用,有时候会有同事给一下指导说用什么解决问题。关键时候还是多看(看书,看别人的代码)和多用。

    1.display:none; 和 visibility:hidden;的区