； 安装 脚手架安装 接下来我们分别尝试不同的安装方式，先使用脚手架进行安装，执行命令 ： npx create-nuxt-app creact-nuxt 接着，在命令行中会有很多的选择项，分别有项目名称...，你在Vue 中如何使用，在Nuxt 中同样如何使用就可以了。...，无需额外代码 return { dataObj }; }, }; Nuxt.js 对 SSG 的支持 在开始之前，我们需要先了解 SSG 的含义，SSG（Static...那么，在 Nuxt.js 中如何将应用静态化导出呢？...mounted 在静态站点生成时，不会执行获取数据，代码会被编译进静态生成的 JS 中，浏览器渲染时才会被执行， asyncData 在导出静态站点时，会执行代码，并将数据直接编译进 HTML 中，代码不会编译到静态文件的
若使用vw布局，就不需要再像rem那样，在js中去动态设置根元素的font-size了，sass中只需要使用这个函数做转换即可 //以iphone7尺寸@2x 750像素宽的视觉稿为例 @function... vw($px) { @return ($px / 750) * 100vw; } //假设一个div元素在视觉稿中，宽度为120px，字体大小为12px div { width: vw...100vw包括了页面滚动条宽度（页面滚动条属于viewport范围内，100vw当然包括了页面滚动条宽度）。但把body或者html设置为width:100%时，是不包括页面滚动条的宽度的。...那么就会引发一个问题：pc端使用vw单位时，如果页面内容超出一屏长度，出现了纵向滚动条，同时有元素width:100vw， 则会导致出现条横向滚动条，因为元素（100vw + 滚动条宽度）超出了viewport...（移动端滚动条不占位，所以不会有这个问题）不过pc端一般不需要弹性布局，还是尽量使用width:100%更保险。 为何rem布局比vw主流？
这和使用一组额外的小括号而不使用 calc()部分是一样的。...，这并不重要，因为在HTML中的自定义属性同样有用，甚至更有用!...我用它创建了一个.full-bleed 实用工具类：.full-bleed{width:100vw；margin left:calc（50%-50vw）；}我想calc（）在我的前3个CSS中。...我很喜欢的一个方法是有一个 "内容宽度 "的自定义属性，然后用它来创建我需要的间距，比如 margins: .margin { width: calc( (100vw - var(--content-width...我用它来使文章页面上的一些图片溢出其容器。 我用它与padding和vw/vh单位相结合，在页面上正确地放置了一个可视化。 我用它来克服背景-位置的限制，但特别是在渐变中定位颜色停止的限制。
苹果 iPhone4 首次提出了 Retina Display（视网膜屏幕）的概念，在 iPhone4 使用的视网膜屏幕中，把 2x2 个像素当 1 个物理像素使用，即使用 2x2 个像素显示原来 1...，在浏览器中，是指能用来显示网页的区域。...使用公式：（元素大小 / 设计稿大小）* 100vw 将元素大小转换为 vw 单位的大小。...当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式，提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。...弹性盒适配的基本原则是： 内容流式：即弹性项目（弹性布局容器中的每一个子元素）的填充内容使用流式布局。 布局弹性：即涉及元素排列、对齐和空间分配时，使用弹性盒进行布局。 目前，没有完美的适配方式。
,也就1px=0.1rem 在我们根据UI设计稿实际尺寸中，如果量得尺寸是16px那么就是1.6rem,只需要在原单位基础上/10即可 注意我们meta标签上同样要默认设置<meta name="viewport...rem适配用得比较多 vw适配 vw是视口单位，通常来讲会将可视区域分成<em>100vw</em> <em>在</em>利用vw与calc来设置根html<em>的</em>font-size，然后用rem单位 然后我们看下代 * { padding...:62.5%<em>时</em>，我们利用rem单位设置元素单位，1rem=10px,所以当设计稿750像素<em>时</em>，量尺寸20px,那么你实际单位换成rem<em>时</em>，就是2rem,原有尺寸缩小10倍即可，这种方案<em>会有</em>一定误差，但也基本满足移动端自适应...vw+calc+rem方案，同样是设置根html<em>的</em>单位，主要是font-size: calc(<em>100vw</em> / targetWidth * 10),我们把vw视口单位，如果你<em>的</em>设计稿是640,<em>100vw</em>...就是targetWidth=320像素,如果你<em>的</em>设计稿是750，那么targetWidth=375，1rem = 10vw = 10px,所以当你750<em>的</em>设计稿20像素<em>时</em>，那么<em>在</em>实际网页<em>的</em>单位只需要缩小
vw 和 vh 中最大的那个 这边需要注意的是，vw是视口宽度，是连滚动条都算在内的： <div style="<em>width</em>: <em>100vw</em>;height...vmin和vmax<em>的</em>例子： <div style="width:...我去看了之前的项目和淘宝，根据750的设计稿，使用flexible.js的在屏幕556px之后html的font-size最大是54px，移动端的时候540之后html的font-size最大也是54px...我不知道用rem会有哪些问题，要是我，我还是会使用rem，可能也是因为主观习惯问题，说不定以后有项目用的是viewport，接手之后习惯了就变的真香。
# 1、前言 设计师交付给前端开发一张宽度为750px的视觉稿，设计稿上元素的尺寸、颜色、位置等已做过标注，要求工程师工在适配不同屏幕尺寸的设备时采用等比缩放的方案。...# 2、原理 vw是相对单位，1vw表示屏幕宽度的1%。基于此，我们可以把所有需要适配屏幕大小等比缩放的元素都使用vw做为单位。不需要缩放的元素使用px做单位。 举个例子。...对于任何需要等比缩放的元素，在写CSS设置样式时直接换算成vw即可，尺寸 = 100vw*设计稿标注大小/设计稿宽度。...我们可以在CSS里使用calc来换算换，只不过需要注意新语法的兼容性。...: calc(100vw*48/750); width: calc(120*var(--ratio)); /* 也可以用calc配合var使用，IE不支持var */ border
window.screen.width 大于750时，我们就把页面整体缩放，如果小于750时，就把页面整体放大，缩小和放大的比例，我们通过 window.screen.width / 750 (设计稿大小...设计稿上的某个元素宽度为50px，那我在写rem单位时可以直接除以100写成0.5rem即可，方便计算。...下图为实现效果图片上面的代码会有一个最大变化的阀值，为designWidth也就是720px，当浏览器窗口的大小超过这个值时，就不再动态变化了，这个可以保证在pc上也能正常显示。...我们就得到了px和vw的转换公式：px * 100vw / 750在项目中具体的实现方式，首先和rem一样也需要设置meta标签<meta name="viewport" content="<em>width</em>=...这个函数最初由 iOS 浏览器提供，用于允许开发人员将其内容放置<em>在</em>视口<em>的</em>安全区域中，该规范<em>中</em>定义<em>的</em> safe-area-inset-* 值用于确保内容即使<em>在</em>非矩形<em>的</em>视区<em>中</em>也可以完全显示。
最近遇到了一个小bug，在ipad上编辑word文件的虚拟键盘收回时，会导致页面的导航条隐藏，且页面的下面会出现一块空白 自己尝试的解决方案 通过focusin和focusout对虚拟键盘的弹入弹出进行监听...如果在虚拟键盘弹出时元素的高度等有变化，那么可以尝试通过这种方式判断虚拟键盘是不是弹出来了....`` `#container {` `display: flex;` `width: 100vh;` `height: 100vw;` `}` `#child {` `...`` `` `` `` `` 这里主要有两点需要注意： 在移动端设备中...因此他的高度为绝对定位中的100%设置的高度，但是又设置了overflow:hidden，因此才会在虚拟键盘隐藏时出现一部分空白，从而导致了导航条的隐藏。
在 WeGame 的 PC 端官网首页，有着非常多制作精良的基于滚动的动画效果。 这里我简单截取其中 2 个比较有意思的转场动画，大家感受感受。...其余的内容，简单解释下： 我们在 LOGO 后面的图层，用 .g-bg 使用一张图片表示了场景 2 #g-scroll 用于基于滚动条的滚动，实现滚动动画 .g-wegame 里面就是上述使用 mask...离目标又近了一步，但是，仔细观察原效果，我们还少了一层： 在 LOGO 渐隐的过程中，背后的背景不是直接呈现的，而是有一个渐现的过程。...所以，完整而言，在动画过程从，一共会有 4 层： 所以，完整的代码，大概是这样的： <div class="g-wrap...这在之前，是完全不可能<em>使用</em>纯 CSS 实现<em>的</em>。
在本次训练营中，我们将通过沉浸式体验，带您一步步编写一个基于 Nuxt.js 的静态博客系统。...图片 拓展内容 开发和构建: 使用Nuxt进行开发时，可以在pages目录下创建页面组件，Nuxt会自动根据文件名生成路由。...在每个页面组件中，可以使用head方法来设置页面的标题、meta标签等信息，这些信息将在服务端被渲染。 部署项目: 在部署Nuxt项目时，你可以选择将项目部署到服务器上或者使用静态文件托管服务。...在左侧区域中，使用了v-for指令遍历nav数组中的对象，生成对应的导航项，并绑定了点击事件。...methods中定义了一个handleLink(item)方法，当博客列表中的标题被点击时，会在新窗口中打开对应的博客链接。 样式部分： 使用了SCSS预处理器语法。
同时，初始加载时用户可能会看到空白的页面或者出现闪烁的内容。 相比之下，服务端渲染通过在服务器上预先生成完整的 HTML 页面，将其发送给客户端浏览器。...这样，浏览器在接收到页面时就能够立即显示完整的内容，而不需要等待 JavaScript 的下载和执行。...要开始使用 Next.js，您可以按照以下步骤进行： 创建新项目：使用命令行工具，在您选择的目录中创建一个新的 Next.js 项目。...如何开始使用 Nest.js？ 要开始使用 Nest.js，您可以按照以下步骤进行： 创建新项目：使用命令行工具，在您选择的目录中创建一个新的 Nest.js 项目。...注册控制器：在模块文件中，将控制器注册到相应的模块中。您可以使用装饰器 @Module 和 controllers 属性来完成这一步骤。
assets/：存放未编译的静态资源，比如CSS、JavaScript和图片。在构建时，Nuxt.js会处理这些资源。components/：存储自定义Vue组件，可以复用在应用的不同部分。...以下是Nuxt.js页面渲染的详细步骤：初始化：用户在浏览器中输入URL并发送请求到服务器。服务器接收到请求后，开始处理。...后续导航：当用户导航到其他页面时，Nuxt.js 使用客户端路由（Vue Router）进行无刷新跳转。...这些数据会在生成静态页面时被注入到 HTML 中，使页面在客户端加载时无需额外请求： // pages/about.vue export default { async asyncData...中间件处理：服务器端的中间件不会在SSG过程中执行，因为SSG是在没有服务器环境的情况下生成静态文件。所以，如果需要在生成时执行某些逻辑，最好在 asyncData 或 fetch 中处理。5.
CSS技巧大杂烩 01 Safari 中z-index的层级问题 在Safari浏览器下(此Safari浏览器包括iOS的Safari，iPhone上的微信浏览器，以及Mac OS X系统的Safari...例如下面的场景，图中红框里面的模块，使用 3D transform变换，进行旋转动画，但是在Safari浏览器下，忽略了二维码遮罩层的z-index,结果使用了真实世界的3D视角进行渲染。...解决方法： 然后测试发现，在旋转过程中（只要未完全旋转90度）点击还是能一切正常的。于是把旋转角度改为了89.99度，一切正常。...（alpha：1）,其他部分为透明的（alpha：0），将它盖在背景图上，注意：背景图对应mask.png中透明的位置也会变成透明，留下非透明的形状，即背景图的可见形状与mask.png的可见形状相同，...css中，当padding-top/bottom值为百分比时，其值都是以其父元素的宽度为参照对象。
使用CSS把页面尺寸布局骨架搭好，再在里面吐数据。于是，要么没有滚动条，要么滚动条直接出现。不会出现跳动。 ? 然而，然而，后面的策略只适合一些特殊的定制性很强的页面。...你说像知乎这样子，高度随内容而定的页面，显然就无法驾驭；而第1种方法overflow-y: scroll，在页面高度较小的时候，依然会保留一个丑陋的灰色的滚动栏，这其实又回到了IE当道的旧社会时代。...首先，.wrap-outer指的是居中定宽主体的父级，如果没有，创建一个（使用主体也是可以实现类似效果，不过本着宽度分离原则，不推荐）； 然后，calc是CSS3中的计算，IE10+浏览器支持，IE9...您可以狠狠地点击这里(IE10+)：页面出现滚动条的时候没有跳动demo demo页面中，标题和下面的妹子都是居中效果。...如果你也有精彩创意且使用的前端tips, 不妨也拿出来共享下，会有很多意外的收获与成长的。 ?
拓展内容 开发和构建: 使用Nuxt进行开发时，可以在pages目录下创建页面组件，Nuxt会自动根据文件名生成路由。...在每个页面组件中，可以使用head方法来设置页面的标题、meta标签等信息，这些信息将在服务端被渲染。 部署项目: 在部署Nuxt项目时，你可以选择将项目部署到服务器上或者使用静态文件托管服务。...在左侧区域中，使用了v-for指令遍历nav数组中的对象，生成对应的导航项，并绑定了点击事件。...主要内容区域中使用了v-for指令遍历blogJson数组中的对象，在每个对象对应的中展示博客的标题、描述和图片。 脚本部分： 使用了import语句引入了一些资源文件和组件。...methods中定义了一个handleLink(item)方法，当博客列表中的标题被点击时，会在新窗口中打开对应的博客链接。 样式部分： 使用了SCSS预处理器语法。
根据最新规范，如果srcset中任何图像使用了w描述符，那么必须要设置sizes属性。 2. sizes属性有两个值：第一个是媒体条件；第二个是源图尺寸值，在特定媒体条件下，此值决定了图片的宽度。...="USWNT World Cup victory"> 上例中，我们告诉浏览器在viewport宽度小于400像素时，使图像的宽度与viewport等宽。...在viewport宽度小于960像素时，使图像的宽度为viewport宽度的75％。当viewport大于960像素时，使图像的宽度为640像素。 vm ? 当处理宽度的时候，%单位更合适。...在这个例子中，我用红色边框包裹html元素，然后给section元素设置背景颜色。 ? 因为这个细微的差别，当使一个元素横跨整个页面的宽度时，最好使用百分比单位而不是视口的宽度。 2....占满高度的元素:vh > % 在另一方面，当使一个元素跨越整个页面的高度时，vh远比百分比单位好。
引言 书写页面样式与布局是前端工程师Coding 中必不可少的一项工作，在定义页面元素的样式时，padding 属性也是经常被使用到的。...题目须知： 页面中有一个元素A，请实现以下需求： 元素A在页面内水平、垂直居中； 元素A距离页面左右的间距为10px，元素A的宽度随页面宽度变大而变大； 设置元素A的高度始终为宽度的一半； 只要是对CSS...，实际宽度会受到弹性盒子的影响 */ width: 100vw; /* calc方法动态计算：height的值为宽度的1/2，所以是 (100vw - 20px) / 2 */...啦啦啦，快来使用padding-top，哼哼哈嘿... 探究padding-top的秘密 当padding-top的值为百分比时，参考的对象是父级元素的宽度 这句话圈起来，是重点，要考~ 此处也可以选择使用padding-bottom 此刻你再抬头时，看到了面试官那饱含了心满意足、孺子可教的热烈眼神...
一般情况下SkeyeWebPlayer播放器的宽度是自适应，高度css 或者 new WebMediaPlayer()中的height参数来设置，常用的56.25 （56.25% 等于 16:9 ）上传失败...：服务器响应格式错误1、移动端web禁止用户伸缩网页我们可以使用viewport禁止放大和缩小，通常把user-scalable设置为0来禁止用户对网页视图的伸缩行为，完整的viewport信息：2、SkeyeWebPlayer 播放器在移动端使用SkeyeWebPlayer 播放器默认情况下会根据屏幕宽度自动进行自适应，默认宽度等于100%，在外部盒子没有设置宽度的情况下，播放器的宽度与屏幕相等...，在初始化播放器 height：0 或者不设置时，可以用css来设置hegiht。...: 100vw; height: 100vh; }}强制横屏如图：（强制通过页面 禁止app或手机的横竖屏的切换是不现实的，H5只能针对自身页面做适配！！！）
我们之前学习的Vue就是SPA中的佼佼者。...API无法使用 1.5 什么是Nuxt.js Nuxt.js 是一个基于 Vue.js 的通用应用框架。...例如：LESS、SASS等 默认情况下，Nuxt使用Webpack若干加载器处理目录中的文件 components vue组件目录，Nuxt.js 不会增强该目录，及不支持SSR layouts 布局组件目录...pages/user.vue 文件 【优先级高】 pages/user/index.vue 文件 4.3 动态路由 在 Nuxt.js 里面定义带参数的动态路由，需要创建对应的以下划线作为前缀的...transition 字段即可： 步骤1：在全局样式 assets/main.css 中添加名称为test的过渡效果 .test-enter-active, .test-leave-active
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
