- 博客(7)
- 收藏
- 关注
RSS订阅原创 rem适配方案2
简洁高效的rem适配方案flexible.js。 手机淘宝团队的简洁高效移动端适配库。 我们再也不需要要在写不同屏幕的媒体查询，因为里面js做了处理。 它们的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。 我们要做的，就是确定号我们当前设备的HTML文字大小就可以了。 比如当前设计稿750px，那么我们只需要把HTML文字大小设置为。75px(750px/10)就可以了。 里面页面元素rem值：页面元素的px的值 / 75。 剩余的，让flexible.js来去算。 ...
2020-10-17 11:38:02
92
原创 rem那些事
1.页面布局文字能否随着屏幕大小变化而变化？ 2.流式布局和flex布局主要针对于宽度布局，那高度如何设置？ 3.怎么样让屏幕发生变化的时候元素高度和宽度等比例缩放？ rem基础 rem(root em)是相对单位，类似于em,em是父元素字体大小。 不同的是rem的基准相对于HTML元素的字体大小。 比如，根元素(HTML)设置font-size=12px;非跟元素设置width：2rem;则换成px表示就是24px. rem的优点：可以通过修改HTML里面的文字大小来改变页面中的元素大小可以整体控制 媒
2020-10-15 21:21:26
189
2
原创 背景线性渐变
背景线性渐变 语法： background:linear-gradient(起始方向，颜色1，颜色2，…); background:-webkit-linear-gradinent(left,red,blue); background:-webkit-linear-gradient(left,top,red,blue);
2020-10-15 17:53:02
85
原创 FLEX布局那些事
flex布局体验 建议: 1.如果是PC端页面布局,我们还是传统布局 2.如果是移动端或者不考虑兼容性问题的PC端页面布局,我们还是使用flex布局 flex布局原理 flex是flexible Box 的缩写,意为"弹性布局",用来为和状模型提供最大的灵活性,任何一个容器都可以指定为flex布局 当我们为父盒子设为flex布局以后,子元素float clear vertical-align 属性将失效. 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex 采用flex布局的元素,称为f
2020-10-14 13:37:57
116
原创 图片压缩那些事
DPG图片压缩技术 京东自主研发推出DPG图片压缩技术，经测试该技术，可直接节省用户近５０％的浏览量，极大的提升了用户的网页打开速度。能够兼容JPEG，实现全平台，全部浏览器的兼容支持。 webp图片格式 谷歌开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的２／３，并能节省大量的服务器宽带资源和数据空间 ...
2020-10-14 10:44:44
80
原创 移动端初识
移动端基础 移动端浏览器我们主要对webkit内核进行兼容 我们现在开发的移动端主要针对手机端开发 现在移动端碎片化比较严重，分辨率和屏幕尺寸大小不一 学会兼容谷歌浏览器模拟手机界面以及调试 视口 视口(viewport)就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口、和理想视口 布局视口layout viewport 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。 iOS,Android基本都将这个视口分辨率设置为980px,所以PC上的页面大
2020-10-12 19:35:19
134
原创 css3那些事
css3属性选择器 属性等于值 input[type=“search”]{} 以某个值开头的 属性值 div[class^=“icon”]{} 以某个值结尾的 div[class$=“icon”]{} 可以在任意位置的 div[class*=“icon”]{} css3结构伪类选择器 css3伪元素选择器 css3 2D转换 css3动画 css3 3D转换 浏览器私有前缀 ...
2020-10-10 23:04:56
99
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人