Hong•Guo - 博客园

2021年12月30日

摘要： @ 1. 视口简介视口(viewport) 就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口 2. 布局视口 layout viewport 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。 iOS, Android基本都将这个阅读全文

posted @ 2021-12-30 02:08 Hong•Guo 阅读(173) 评论(0) 推荐(0)

移动端基础

摘要： @ 1. 浏览器现状 PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器等移动端常见浏览器：UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器等国内的UC和QQ，百度阅读全文

posted @ 2021-12-30 02:05 Hong•Guo 阅读(42) 评论(0) 推荐(0)

2021年12月29日

17. iconfont 字体图标

摘要： @ 图片是有诸多优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还增加了很多额外的"http请求"，这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”，因为图片放大和缩小会失真。尤其是移动端响应式，很多情况下希望我们的图标是可以缩放的。此时，一个非常重要的技术就是字体图标（i 阅读全文

posted @ 2021-12-29 20:57 Hong•Guo 阅读(374) 评论(0) 推荐(0)

2021年12月26日

Less

摘要： @ 1. 维护 css 的弊端 CSS 是一门非程序式语言，没有变量、函数、 SCOPE（作用域）等概念。 CSS 需要书写大量看似没有逻辑的代码， CSS 冗余度是比较高的。不方便维护及扩展，不利于复用。 CSS 没有很好的计算能力非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写阅读全文

posted @ 2021-12-26 10:52 Hong•Guo 阅读(84) 评论(0) 推荐(1)

16. 媒体查询

摘要： @ CSS 媒体类型 CSS3 多媒体查询 1. 什么是媒体查询媒体查询（Media Query）是CSS3新语法。使用 @media查询，可以针对不同的媒体类型定义不同的样式目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询 2. 媒体查询语法规范用 @media开头阅读全文

posted @ 2021-12-26 10:33 Hong•Guo 阅读(327) 评论(0) 推荐(0)

15. 浏览器私有前缀

摘要：浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加。padding 和 border 不会撑大盒子 ①私有前缀 -moz-：代表 firefox 浏览器私有属性 -ms-：代表 ie 浏览器私有属性 -webkit-：代表 safari、 chrome 私有属性 -o-：代表 Oper 阅读全文

posted @ 2021-12-26 10:31 Hong•Guo 阅读(70) 评论(0) 推荐(0)

14. CSS3-盒子模型

摘要： @ 1. 传统盒子模型传统模式宽度计算：盒子的宽度 = CSS中设置的width + border + padding 通过样式box-sizing: content-box;指定盒子的模型（默认） <style> div { /* 传统盒子模型= width + border + padding 阅读全文

posted @ 2021-12-26 10:29 Hong•Guo 阅读(95) 评论(0) 推荐(0)

13. CSS3-转换(transform)

摘要： @ 1. 简介转换(transform)：是CSS3的特征之一，可以实现元素的位移、旋转，缩放等效果。可理解为“变形”。移动： translate 旋转： rotate 缩放： scale 2. 2D转换 1.) 二维平面坐标系 2D 转换是改变标签在二维平面上的位置和形状的一种技术。二维坐标阅读全文

posted @ 2021-12-26 10:05 Hong•Guo 阅读(131) 评论(0) 推荐(0)

12. CSS3-动画(animation)

摘要： @ ① 什么是动画动画是 CSS3 中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果 ② 动画的基本使用先定义动画在调用定义好的动画 ③ 定义动画用keyframes 定义动画（类似定义类选择器） @keyframes 动画名称 { 0% { w 阅读全文

posted @ 2021-12-26 09:45 Hong•Guo 阅读(80) 评论(0) 推荐(0)

11. CSS3-过渡transition

摘要： @ 1. 简介过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。过渡动画：是从一个状态渐渐的过渡到另外一个状态可以让我们页面更好看，更动感十足，虽然低版本浏阅读全文

posted @ 2021-12-26 09:40 Hong•Guo 阅读(68) 评论(0) 推荐(0)

Loading

Ｈｏｎｇ

欢迎来到我的博客🤞🌹~

公告