随笔分类 -  css和h5

响应式网站设计
摘要：响应式开发原理 响应式开发就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同的设备 设备的一般划分情况如下： 小于768的为超小屏幕（手机） 768~992之间的为小屏设备(平板) 992~1200之间的为中屏设备（桌面显示器） 大于1200的为宽屏设备（大桌面显示器） 媒体查询 阅读全文
posted @ 2024-06-28 10:12 songxia777 阅读(33) 评论(0) 推荐(0)
移动端弹性布局
摘要：前言 在PC端中，子容器高度超出父容器高度，通常使用 overflow:auto 可出现滚动条拖动显示溢出的内容 而移动web开发中，由于浏览器厂商的系统不同、版本不同，会有部分机型不支持弹性滚动 上图如果在PC端中，我们可以利用 position:fixed 和 overflow:auto 进行简 阅读全文
posted @ 2023-10-09 11:31 songxia777 阅读(65) 评论(0) 推荐(0)
-webkit-text-size-adjust的用法
摘要：1、Chrome浏览器默认情况下的字体最小为12px，如果你要设置某字体大小为10px的话，你会在Chrome发现还是12px。如果要使此生效的话，就得修改Chrome的默认配置了，一般应用下面的代码就能在全局生效了： html { -webkit-text-size-adjust: none; } 阅读全文
posted @ 2023-10-09 11:29 songxia777 阅读(1312) 评论(0) 推荐(0)
scss基础
摘要：官网 https://www.sass.hk/guide/ 变量 导入SASS文件 静默注释 混合器 选择器继承 style选项 if 指令 for 循环 each 循环 while条件 function 函数 文件后缀 sass有两种后缀名文件： 后缀名为sass，不使用大括号和分号 后缀名为sc 阅读全文
posted @ 2023-10-09 11:29 songxia777 阅读(28) 评论(0) 推荐(0)
less基础
摘要：CSS三大预处理器 SASS，Less，Stylus Less介绍 Less CSS文件是一种动态样式文件，属于css预处理语言的一种，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。 Less 可以运行在 Node 或浏览器端。 Less中文官网：http: 阅读全文
posted @ 2023-10-09 11:14 songxia777 阅读(45) 评论(0) 推荐(0)
h5适配
摘要：1. 其他 1.1 常用字级单位：px rem pt 百分比 em 等` 1.2 css媒介查询临界点（7个范围设置） html{font-size:10px} @media screen and (min-width:321px) and (max-width:375px){html{font-s 阅读全文
posted @ 2023-10-09 11:08 songxia777 阅读(87) 评论(0) 推荐(0)
h5基础
摘要：1. 介绍 1.1 IPhone6的参数 设备像素 750 * 1334 设备独立像素 375 * 667 屏幕分辨率 750 * 1334 ppi 326 一般设置的移动端最大和最小宽度 min-width:320px; max-width:640px; 1.2 980 布局视口 980 像素就是 阅读全文
posted @ 2023-10-09 11:01 songxia777 阅读(81) 评论(0) 推荐(0)
像素
摘要：3. 像素相关 3.1 物理像素 / 设备像素 设备像素 / 物理像素 是一个长度单位 物理像素对应显示设备中一个微小的物理部件 设备像素是手机屏幕的一个参数，由手机制造商决定。例如 IPhone 6 的物理像素为 750 * 1334 3.2 设备独立像素 / 设备无关像素 设备独立像素（也叫密度 阅读全文
posted @ 2023-10-09 10:55 songxia777 阅读(225) 评论(0) 推荐(0)
CSS常用总结
摘要：css3常用 圆角边框 border-radius: 10px; 边框阴影 box-shadow: 10px 10px 5px 5px #888888; box-shadow:none; //无边框阴影 参数一：第1个长度值用来设置对象的 阴影水平偏移值。可以为负值 参数二：第2个长度值用来设置对象 阅读全文
posted @ 2023-10-09 10:53 songxia777 阅读(36) 评论(0) 推荐(0)
CSS单位
摘要：CSS常用长度单位 px：相对长度单位 相对于显示器屏幕分辨率 rem：相对长度单位 对于根元素(即html元素)font-size计算值的倍数 html{ font-size:14px; 那么 14px=1rem 28px=2rem 即：n px=n/14 rem } h3{ font-size= 阅读全文
posted @ 2023-10-09 10:44 songxia777 阅读(90) 评论(0) 推荐(0)
CSS3 animation设置图片上下移动
摘要：<img src="./images/kaihu.png" alt="开户"> img { width: 142px; height: 118px; position: relative; top: 0px; animation: myMove 2s infinite; -webkit-animat 阅读全文
posted @ 2019-07-08 16:08 songxia777 阅读(6746) 评论(0) 推荐(0)
CSS中垂直水平居中
摘要：方法一：使用flex布局，父级元素设置justify-content和align-items <div class="cont"> <div class="item"></div> </div> .cont { width: 100px; height: 100px; background: red 阅读全文
posted @ 2019-06-24 17:49 songxia777 阅读(218) 评论(0) 推荐(0)
display:none和visibility:hidden v-show和v-if的区别
摘要：隐藏元素display:none 和 visibility:hidden的区别visibility:hidden可以隐藏某个元素，但是隐藏的元素仍要占据空间，仍要影响布局display:none不会占据空间v-if和v-show都可以动态的控制dom显示和隐藏v-if是将dom元素动态的添加或删除v 阅读全文
posted @ 2019-01-14 20:27 songxia777 阅读(2474) 评论(0) 推荐(0)
CSS3中translate、transform和translation的区别和联系
摘要： 阅读全文
posted @ 2017-07-06 09:33 songxia777 阅读(143) 评论(0) 推荐(0)