一、vw, vhvw它是根据可视区的宽度来计算的。vh它是根据可视区的高度来计算的。<body>
<style>
body { margin:0; }
.testDiv { width:100vw; height:100vh; font-size:10vw; background:#ccc; }
</style>
<div class="testDiv
<script> !function(n){//rem var e=n.document,//document t=e.documentElement,//body i=750,//设计稿宽度 d=i/100,//100px=1rem d:代表页面的总宽（rem）；750宽度时font-size为1 Read More
转载
2020-04-29 14:29:00
147阅读
2评论
在移动端进行前端开发如何选择字体是需要注意的。习惯了在pc端使用像素（px）来作为文字大小的单位，你可能会想到，在移动端开发中依然使用pc端开发的习惯可能对最终效果造成难以预料的结果。不要轻易使用px作为文字大小的单位。你可能认为由浏览器自动选择字体大小就可以了，但是绝大多数浏览器都默认以16px来显示字体,不信你可以自己试试看，当然各种浏览器的默认设置是不同的，通常我们通过reset来初始化一些
只是想把最近移动平台web开发的一点经验和大家分享下。 1.iScroll控件 这个控件可以说是非常不错的一个使用mobile webkit开发的一个实现滑动效果的控件。 它是纯粹的js写的，不依赖其它js框架。下面几个例子是在ipad的Safari的效果： 轮播图： 滑动效果(类似于新浪微博的客户端，向上
介绍cube-ui是一个基于Vue.js实现的移动端组件库，它是由滴滴内部组件库精简提炼出来的，追求接近原生的体验！ 特性质量可靠由滴滴内部组件库精简提炼而来，经历了业务一年多的考验，并且每个组件都有充分单元测试，为后续集成提供保障。体验极致以迅速响应、动画流畅、接近原生为目标，在交互体验方面追求极致。标准规范遵循统一的设计交互标准，高度还原设计效果；接口标准化，统一规范使用方式，开发更加
如今手机已经成为人们的主要沟通工具了，在互联网发展的现阶段，人们也越来越依赖于移动设备，那么对于程序员来说，我们要做的产品、项目最多的也是移动端的app，那么在开发阶段中，我们如何测试移动端网页呢？有人说在手机上直接测试，这样的操作对于程序员来说是很麻烦的，也比较浪费效率，因为我们要修改一个语法就要启动一次手机测试，效率相对就比较低，那么如何在pc上进行移动端网页的测试呢，今天给大家提供以下几种方
一、背景在使用 vue-cli 构建移动端项目的时候，移动端自适应应该是很常见的需求了，之前见过有直接在 html 文件head 标签内添加 rem 设置的，这里分享一下使用淘宝的 lib-flexible 和 px2rem-loader 配合 vue-cli 构建的项目配置移动端自适应。话不多说，上方案，有问题希望大家多提问题和其他方案！！！！！二、方案方案一、rem + 根font-size设
document.documentElement.style.fontSize = innerWidth /16 +'px' window.onresize = function(){ document.documentElement.style.fontSize = innerWidth /16 +'px' } document.getElementsByTagN
原创
2022-03-28 16:26:51
121阅读
rem是什么？ rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似
转载
2024-04-21 15:37:27
114阅读
document.documentElement.style.fontSize = innerWidth /16 +'px' window.onresize = function(){ document.documentElement.style.fontSize = innerWidth /16 +'px' } document.getElementsByTagN
原创
2021-06-30 11:58:19
470阅读
Vant 中的样式默认使用 px 作为单位，如果需要使用 rem 单位，推荐使用以下两个工具：postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 remlib-flexible 用于设置 rem 基准值下面我们分别将这两个工具配置到项目中完成 REM 适配。一、使用 lib-flexible 动态设置 REM 基准值（html 标签的字体大小）1、安装 # yarn a
转载
2024-05-20 12:33:33
405阅读
Referrer的重要性HTTP请求中有一个referer的报文头，用来指明当前流量的来源参考页。例如在www.sina.com.cn/sports/上点击一个链接到达cctv.com首页，那么就referrer就是www.sina.com.cn/sports/了。在Javascript中，我们可以通过document.referrer来获取同样的信息。通过这个信息，我们就可以知道访客是从什么渠道
0 tl;dr其实也没啥原理，就是一个比例问题。1 前置知识设备独立像素（DIP）：一种抽象的像素，与实际物理像素之间的比值就是DPR。简而言之，一个设备独立像素实际上可以由\(1\times1\),\(2\times2\),\(3\times3\)...等任意多个物理像素来表现，取决于设备的设置。而应用一般并不需要实际与物理设备打交道，只与设备独立像素打交道。理想视口：布局视口等于设备独立像素宽
0X00 历史之日2018年1月3日，Google Project Zero（GPZ）团队安全研究员Jann Horn在其团队博客[1]中爆出CPU芯片的两组漏洞，分别是Meltdown与Spectre。Meltdown对应CVE-2017-5754（乱序执行缓存污染），Spectre对应CVE-2017-5753（边界检查绕过）与CVE-2017-5715（分支目标注入）。看CVE编号就能知道
为什么要造轮子在 React 中使用表单有个明显的痛点，就是需要维护大量的value和onChange，比如一个简单的登录框：class App extends React.Component {
constructor(props) {
super(props);
this.state = {
username: "",
password: ""
物理分辨率和逻辑分辨率视口视口（viewport）就是浏览器显示页面内容的屏幕区域。perspective 是透视，可以让电脑模拟 3d效果， 实现近大远小的效果。transform-style 立体呈现 可以让 子元素 里面按照设置位移，旋转，缩放，扭曲等。如果不给父元素这个属性，这里面所有的子盒子都是平面的。移动端特点PC端/移动端不同PC端屏幕大，网页固定版心端浏览器繁多，更多考
手机GUI自动化测试介绍摘要众所周知，自动化测试可以一定程度上减轻测试人员负担，提高测试效率，并且通过自动化还可以实现可靠性测试和性能测试。对于移动客户端测试而言，如果我们能够让手机自动运行应用程序来帮助我们检测功能的正确性，会不会很酷？有道测试组对一些热门的手机自动化工具进行了调研，并选择了一些工具进行实际的使用。本文将会结合实际工作，对移动客户端（Android&iOS）GUI自动化的
11月2日下午，在2021年中国移动全球合作伙伴大会产业链创新及算力网络论坛上，中国移动研究院副院长段晓东就刚刚发布的《算力网络白皮书》进行了深度解读，系统诠释了中国移动算力网络的定义内涵、实施路径、定位及愿景。段晓东指出，算力网络是响应国家战略、顺应产业发展和推动公司转型的必然要求，为社会数智化发展和中国移动战略转型带来全新机遇。在第一部分，段晓东对中国移动算力网络定义内涵做了详细介绍。重点围绕
$(function(){ var currClientWidth, fontValue,originWidth; //originWidth用来设置设计稿原型的屏幕宽度（这里是以 Iphone 6为原型的设计稿） originWidth=640; __resize(); //注册 resize事件 window.addEventListen...
转载
2016-07-29 11:05:00
257阅读
2评论
移动端适配rem的两种方法rem是根据你的根元素html的字体大小进行换算的，所以一切换算都要从font-size进行着手。方法一：用media方法就是根据你需要的几台设备来进行设置来进行适配。代码类似如下：html{
font-size: 100px;
}
/* ip6 */
@media screen and (min-width:375px) {
转载
2024-08-07 13:56:41
476阅读
