CSS 与移动端
布局、Flex/BFC、移动端适配与小程序的尺寸单位
17 篇文章
📝 博客中心
17 篇文章2021-05-18 关于获取错误头像和匿名名称，原因是wx.getUserProfile替换wx.getUserInfo
从4月31日起，wx.getUserProfile(Object object)将替换wx.getUserInfo(Object object)微信接口，而且该接口必须点击产...
获取移动端浏览器窗口宽度
获取内部窗口宽度：window.screen.width获取浏览器窗口宽度：document.documentElement.clientWidth
小程序尺寸rpx单位换算
换算是以375个物理像素为基准，也就是在一个宽度为375物理像素的屏幕下，1rpx = 1px。 例子：iPhone6屏幕宽度为375px，共750个物理像素，那么1rpx ...
BFC简述
什么是BFC 在一个Web页面的CSS渲染中，块级格式化上下文 (Block Fromatting Context)是按照块级盒子布局的。W3C对BFC的定义如下： 为了便于...
window.devicePixelRatio
devicePixelRatio属性该 Window 属性 devicePixelRatio 能够返回当前显示设备的物理像素分辨率与 CSS 像素分辨率的比率。此值也可以解释...
移动端dpr
例子： 在javascript中，可以通过window.devicePixelRatio获取到当前设备的dpr。在css中，可以通过-webkit-device-pixel-...
meta name="viewport" content="width=device-width,initial-scale=1.0" 解释
content属性值 :width:可视区域的宽度，值可为数字或关键词device-widthheight:同widthintial-scale:页面首次被显示是可视区域的缩...
左右两端固定，中间自适应
1.先贴个最难的，圣杯布局三个div先浮动布局，id="main"里面嵌套一层div，设置宽度100%，margin值为左右两端的宽度值。left的div，设置左间距-100...
css居中方法
一.position 元素已知宽度 二.position transform 元素未知宽度 三.flex布局 四.table-cell布局 因为table-cell相当与表格...
移动端适配以及PC和移动端兼容
一、响应式布局 bootstrap的媒体查询@media和网格系统，一般用来兼容PC和移动端 二、自适应布局+弹性布局 rem+viewport+@media媒体查询，一般用...
精灵图
精灵图又称雪碧图，减少服务器加载渲染资源将多个图片合成一张图，然后利用css定位图片位置。 background-position