在之前的项目当中,我在CSS中设置html{font-size: 62.5%;},也就是设置为10px,然后全站根据这个根植,来设置rem单位的样式.这样虽然解决了很多的问题.但是在面对不同宽度的手机的时候,还是需要去自适应设置很多的内容.当然,因为手机分辨率的不同,我们可以自由的将页面设置在320(iphone5s)-414(iphone6plus)这样的范围内还是很合适的.但是,奇葩手机年年有,华为meta8这款奇葩手机的缩放居然是2.5倍,也就是说,它的宽度居然是432,这样一来,我自适应的页面上的内容就显得有些小了.
通过使用 rem + js 改变 html 标签的 font-size（整体缩放）实现兼容性更高的页面下面来举个例子， 当我们拿到的设计图是 750px 的时候，窗口宽度 750px，html 的 font-size 的大小为 100px；
使用canPlayType()方法检查浏览器是否能够播放指定的视频、声频。canPlayType()方法能够返回以下值：
手Q天气是在手Q 6.0版本以上新增的功能，页面会展现当天的气温情况，已经五天温度折线图以及24小时温度图表等。 并且为了更好的交互效果，天气页面会根据8种不同的天气信息，展现相应的天气动画。如下雨下雪，飘云，日光闪烁等动画效果。
github代码地址：https://github.com/Miofly/mio.git
《微信小程序七日谈》系列文章： 本系列的文章并非初学教程，而是笔者在具体开发过程中遇到的问题以及部分解决方案。 上篇文章第一天：人生若只如初见简单记录了笔者初步上手开发微信小程序遇到的一些问题，其中提到了wxss的部分细节问题。这篇文章以笔者在开发小程序响应式UI当中遇到的一些问题为例，简单记录一下使用wxss为响应式开发带来的一些模式和思维上的改变。 rem的重定义 前端工程师对rem非常熟悉，rem是以html元素的font-size为基准的尺寸计量单位。rem方便了开发者对响应式UI的尺寸进行统筹管
例：html中字体尺寸为 20px，盒子宽度为 5rem，则最后显示的盒子宽度为 100px。
flexible会为页面根据屏幕自动添加标签，动态控制initial-scale，maximum-scale，minimum-scale等属性的值。
installcnpm install postcss-px2rem px2rem-loader --save
大家好呀，我是小菜~ 本文主要介绍 Socket.IO 微信公众号已开启，小菜良记，没关注的同学们记得关注哦！ 在介绍 Socket.IO 之前, 我们先考虑一个问题, 如果这个时候有个需求, 类似
是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)。一个CSS像素对应多少个设备像素是根据当前的缩放比例
现在市面上的大部分手机，比如iphone X，它的默认视口宽度为980px，而一个iphone X的屏幕宽度仅仅为375px。看到问题了吗？一个宽度只有375像素的手机，却能够显示宽度为980像素的网页，自然而然，网页会被缩小。
我在准备这样一个学习项目，它与传统的文章/视频类学习不同，我会在教程中内置大量的可交互案例，提供沉浸式的学习体验，并且还可以支持实时修改代码观察案例更改结果。大家可以期待一下。
0. 前言 手机市场日渐丰富的同时，给我们前端开发人员带来的网页内容自适应屏幕尺寸进行显示的问题也日渐凸显出来。原本可能通过百分比/媒体查询等简单手段就可以常见的适配问题，但是对于页面有复杂结构或者
注意： 如果电脑显示的缩放为125%，那么给媒体特性设置宽度时只设置手机型号的宽度不起作用。（因为电脑显示的手机宽度是 ：125%×真实手机宽度）
calc( )的定义 用于动态计算长度值 可以用在任何长度,数值,时间,角度,频率等处 calc( )的运算符 ＋ － ＊ ／ width:calc(50% + 15px); height:calc(100% - 20px); width:calc(15 * 4px); height:calc(100% / 4); ⚠️运算符两边需要有空格 ⚠️使用 * / 运算符时,必须保证有一个值为数值类型 calc( )使用区分 //1. css中 width:calc(100% - 20px);
在安装postcss-pxtorem的时候会生成一个文件.postcssrc.js 在根目录找到.postcssrc.js文件，可以在此配置的基础上根据项目需求进行修改，如：
手机市场日渐丰富的同时，给我们前端开发人员带来的网页内容自适应屏幕尺寸进行显示的问题也日渐凸显出来。原本可能通过百分比/媒体查询等简单手段就可以常见的适配问题，但是对于页面有复杂结构或者视觉上有特殊要求的，就需要通过其他手段来解决了。
很多人写这种小工具文件会习惯性的加上闭包，这个其实是没有必要的。ES6 中每个文件都是单独的一个模块。
今天移动web开发学完了，整理一下思路，移动web首先学习的就是就是flex布局。记录一下flex布局和移动适配的一些知识。
rem 相对于根元素 <html> 的 font-size 的大小来计算坐作为一个单位；simple-flexible 是根据手淘团队 lib-flexible.js，比较，改写的一个插件，兼容 UC 竖屏转横屏出现的 BUG，自定义视觉设计稿的宽度：designWidth，设定最大宽度：maxWidth 这里有 simple-flexible 的 Github 地址，下载下来用即可;
以上是官方团队对WeUI的介绍，作为一个使用频率非常高的UI库，官方也给其提供了weui-wxss、weui.js、react-weui等配套工具来适应微信小程序、普通h5页面、react项目等日常开发
方式一：用媒体查询"@media"，这种写法好处是可以对不同分辨率的设备，展示完全不同的UI界面，一个页面不同的设备看的时候，展示内容可以不一样，交互方式可以不一样。不过这个不方便用在复杂的地方，而且不同的分辨率都需要对应的重新写样式，同一个页面集合太多的这种写法，最好是分开写两套，降低耦合性。但是这种写法费力不讨好，之前有的网站在PC和手机查看到的样式不一致，用了一些这个技术，但是后来很多都是检测到不同设备，就跳转到不同的网页上去了。
冒泡和捕获： 当addEventListener的第三个参数为true的时候，代表是在捕获阶段绑定；当第三个参数为false或者为空的时候，代表在冒泡阶段绑定
前端代码的编写永远逃不过“兼容”二词，从前PC时代，因为IE的傲娇，导致程序猿们一直在兼容IE的道路上挣扎，如今移动设备的普及，仿佛让我们看到了希望，仿佛马上就要摆脱IE了，可是！一波还未平息，一波又来侵袭~移动端确实不用考虑IE了，各种CSS新特性也用的爽到飞起，但一座大山压了过来，那就是分辨率的适配，移动端由于展示区域比较小，因此对于页面在不同分辨率手机上的展示细节也要求更加严格，这时像PC端有些固定宽高的布局方式显然不适应，我们被要求对于不同大小手机页面能自适应，真是非常有（tong）趣（ku）呢~ 话不多说，下面就总结了一些移动端常用的适配手法：
rem和em很容易混淆，其实两个都是css的单位，并且也都是相对单位，现有的em，css3才引入的rem，在介绍rem之前，我们先来了解下em。
布局排版都用rem做单位，然后不同宽度的屏，js动态计算根节点的font-size。
1. Go to Code → Preferences → User Snippets
每种媒体类型都有各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格，暂且了解三个，注意他们要加小括号包含
Less（LeanerStyle Sheets 的缩写）是一门 CSS扩展语言，也成为CSS预处理器。
在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。
前端基础打卡已经基本结束了,内容从css基础,动画,js基本算法,作用域,闭包,节流防抖这些基本的web知识大家有没有都掌握了呢?年后会出一个进阶路线规划图,希望笔者可以带着大家,一起进步,一起成长.
比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。
大家好，本篇文章小编将和大家一起做两个简单的案例——可折叠的问题列表和按分类展示的美食菜谱。这两个案例，我们还是继续练习 useState Hook 的用法。
[总结]我对移动端适配的了解 不知不觉做前端已经两年了，从PC端，移动端，微信小程序一路走来到今天刚刚开放注册的快应用(手机厂商对抗小程序的新技能,所以在注册时用的是qq邮箱的话要去垃圾箱里才能找到注册邮件)，对于前端圈日新月异的磅礴发展对于大前端发展是喜闻乐见的，这次的快应用的手机厂商们为其开放了应用入口和系统推广引流入口。这些新能力为前端开发者们带来更强的作战能力。 我们在开发PC站时经常在浏览器兼容问题上耗费巨大的时间，到了移动端，面对webkit内核的Safari与Chrome会舒心很多。b
先看看 rem 兼容性（基本上所有主流的浏览器都支持）-https://caniuse.com/#feat=rem
本期给大家在webpack5中如何配置css用到的解析和插件的使用，更准确的说是PostCSS的插件。众所周知，现在大部分前端项目都在使用webpack做打包，打包做解析的比较重要目的一个是给js做转化，比如es6转es5，混淆压缩等。然后就是对css进行解析，比如说scss转css，less转css，前缀自动补全，还有移动端项目px转rem或者px转vw。今天我们就介绍将后者其中的前缀自动补全，px转rem，px转vw，这都是在PostCSS中极为常用的插件。
swiper.js 的vue版api跟cdn引入事一样的api用法，共用官网那套api文档，此篇写下时，swiper.js 的版本是 Swiper4.x 。 这篇用的也是4.x的版本，注意swiper4.x跟swiper3.x的api用法有部分不同，详细请参考swiper官网。
作者：Tolonger 原文链接：https://www.jianshu.com/p/9e7e755ca281 除了百分比流式布局之外，rem布局占据了目前移动端布局的热潮。那么究竟这几种布局差别在哪里，对应的有什么效果，希望本文能给你一些有益的启示。除此之外还有响应式布局，固定宽度布局等。 百分比流式布局 这里面最知名的当属bootstrap框架的思路，他所有的组件以及模板ui均是百分比流式布局，单位为px.并且我们看到的大部分对移动端适配的页面也均是采用这种核心思想去做的，方法简单，多端共用，可以针对
前言：当下音乐播放器不胜其数，为了更好的掌握一些东西，我们来自己制作一个音乐播放器。
@media mediatype and | not lonly (media feature) {
base64是用规定的64种字符来表示任意二进制数据的一种编码格式，而且这64种字符均是可见字符，而之所以要是可见的是因为在不同设备上处理不可见字符时可能发生错误。通常，电子邮件数据、公钥证书会经常使用。
说实话一直想做一个可以生成图表的文件，但是一直研究不明白，曾经也看过很多的类似技术的文件，D3.js，Hcharts，Echarts都看过，但是看不下去，一个是api写的很死板，一个是自己事情比较多，今天不是很忙，简单的看了一下，写一个简单的生成图表，很简单，没有什么技术含量， 只是为了抛砖引玉，我写的只是稍微改了一点官方的例子，谁用的比较厉害的，是echarts的高阶玩家的，可以教我一下，一定虚心学习！谢谢了！
效果 2020 博客之星年度总评选排名 分析网页数据 2020 博客之星年度总评选 页面数据接口分析 2.1 (以谷歌浏览器为例) 浏览器打开2020 博客之星年度总评选 ===》 F12(鼠标右键 ===》 检查) ===》 Network ===》 XHR ===》 在列表中找到数据接口点击 2.2 查看接口和请求方式 当前实例数据接口：https://bss.csdn.net/m/topic/blog_star2020/getUsers 请求方式：POST 2.3 查看请求
在用前端给移动端页面写布局时，我接触到了Rem布局，但是老实说我也看了几篇手淘适配的文章，并且主要的目的是拿到代码写出demo，所以对于Rem我还是停留在只会使用的阶段，但是理解的并不透彻，所以要抽出时间，把rem布局的原理搞清楚。
我不是搞前端，而是搞后端的。本命编程语言是java。学习js的嘛，因为看到室友能做出动态网页，而我只能做出静态网页，再加上下个学期要学所以提前来学习学习。
本来只打算理解JS中0.1 + 0.2 == 0.30000000000000004的原因，但发现自己对计算机的数字表示和运算十分陌生，于是只好恶补一下。
在 JS 中我们可以通过 window.devicePixelRatio 获取当前的设备像素。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
实时音视频
