注册会员 | 设为首页 | 加入收藏夹
您好，欢迎光临本网站！[请登录] ！[注册会员]！  

搜索资源列表

  1. 移动端适配+响应式开发参考代码

  2. 设计稿的宽度：designWidth 允许自适应的最大宽度（超过这个值屏幕元素不在自适应增大）:maxWidth 页面顶部加上： 这段js的传入两个参数:一个为设计稿实际宽度，一个为显示的最大宽度（允许的屏幕最大宽度，用来限制屏幕过大之后元素还会自适应增大的） 例如设计稿为750，最大宽度为600，则为(750,600)，屏幕大于600之后就不会自适应变大了，也相当于在用@media属性时min-width只设置到了600，没有后面的屏幕尺寸，就不会再变化了 公式：1rem = 浏览器屏幕宽（

  3. 所属分类：Javascript

    • 发布日期：2018-06-26
    • 文件大小：9216
    • 提供者：tcf_jingfeng

  1. 利用css viewport 做设备适配

  2. 在需要调整设备浏览器的viewport时，我们通常在HTML中使用来解决。但是令人意想不到的是，viewport meta标签并不具有“规范性”，即它不是W3C的正式标准，也非Web标准

  3. 所属分类：其它

    • 发布日期：2020-09-25
    • 文件大小：54272
    • 提供者：weixin_38712899

  1. HTML5移动端开发中的Viewport标签及相关CSS用法解析

  2. 主要介绍了HTML5移动端开发中的Viewport标签及相关CSS用法解析,Viewport常被叫做视口或视区,在移动端布局和屏幕适配中有着重要的作用,需要的朋友可以参考下

  3. 所属分类：其它

    • 发布日期：2020-09-28
    • 文件大小：373760
    • 提供者：weixin_38581308

  1. 详解如何使用rem或viewport进行移动端适配

  2. 在开发移动端界面时，移动端适配一直是一个比较头疼的事情，常见的移动端适配有viewport适配，rem适配，百分比适配等等，在这里我们只介绍viewport适配和rem适配。看完这篇文章相信你应该会实战操作移动端对于不同手机大小的适配问题了。 一：rem适配 rem是指相对于根元素的字体大小(font-size)的单位，根标签的font-size=1rem。其可以称作为相对单位，也就是说我们可以通过视口的大小动态更新根元素字体大小(font-size)的值，从而动态更新rem所相对的值，使用使得

  3. 所属分类：其它

    • 发布日期：2020-11-20
    • 文件大小：123904
    • 提供者：weixin_38711529

  1. 手机端用rem+scss做适配的详解

  2. rem介绍 rem（font size of the root element）是指相对于根元素（即html元素）的字体大小的单位。 假设根元素的字体大小是10px, 则5rem的大小为 5*10=50px,例如 html{ font-size: 10px; } p{ width: 2rem; /* 2*10 = 20px;*/ margin: 1rem; } rem来做适配 以前我们往往这样做页面：viewport width 设置为 device-width，然后选

  3. 所属分类：其它

    • 发布日期：2020-11-21
    • 文件大小：41984
    • 提供者：weixin_38663036

  1. 详解H5 活动页之移动端 REM 布局适配方法

  2. 拿到设计稿后，如何进行布局还原？ 如果只需要做非精确的响应式设计，那么使用媒体查询来实现就 OK 了。如果需要精确还原设计稿，则一般通过缩放来实现。常见方案有基于 viewport 和基于 rem 的缩放方案。 1 viewport 缩放方案 在移动端，可以通过 viewport 缩放页面大小比率达到目的。 简单来说，即所有宽高像素与视觉稿输出相同，然后通过页面宽度与视觉稿的宽度比率，动态设置 viewport。缩放方案核心代码参考： (function () { var docEl

  3. 所属分类：其它

    • 发布日期：2020-11-21
    • 文件大小：67584
    • 提供者：weixin_38576392

  1. 利用css viewport 做设备适配

  2. 在需要调整设备浏览器的viewport时，我们通常在HTML中使用来解决。但是令人意想不到的是，viewport meta标签并不具有“规范性”，即它不是W3C的正式标准，也非Web标准。 Apple公司率先在其iPhone中的Safari浏览器中实现了viewport meta标签，其他浏览器厂商也快速采纳了它。由于IOS、Android及类似平台在平板电脑和智能手机设备中的流行度和市场占有率，使得viewport meta标签被广泛使用。 viewport meta标签是用做布局的，这种活本

  3. 所属分类：其它

    • 发布日期：2020-11-21
    • 文件大小：53248
    • 提供者：weixin_38695293

  1. html5中使用hotcss.js实现手机端自适配的方法

  2. Html5页面在手机端做自适配是很常见的技术需求，下面介绍下在html页面使用hotcss 简介 使用动态的HTML根字体大小和动态的viewport scale。 遵循视觉一致性原则。在不同大小的屏幕和不同的设备像素密度下，让你的页面看起来是一样的。 1.新建一个项目文件夹，目录结构如下图: src //主要文件在这里 ├── hotcss.js ├── px2rem.less ├── px2rem.scss └── px2rem.styl 2.hotcss.js 文件可以下载官方的,也可

  3. 所属分类：其它

    • 发布日期：2020-11-21
    • 文件大小：206848
    • 提供者：weixin_38697557

  1. 详解移动端h5页面根据屏幕适配的四种方案

  2. 方法一：引入淘宝开源的可伸缩布局方案 引入淘宝开源的可伸缩布局方案：https://github.com/amfe/lib-flexible（此处可点击） 淘宝的其实也和viewport的有点像，但是它主要是根据设备设备像素比设置scale的值，保持视口device-width始终等于设备物理像素，屏幕大小动态计算根字体大小，具体是将屏幕划分为10等分。这块也可以直接用js实现，后面会提到 具体引入和使用方法，移步github查看，非常详细。 方法二：viewport 的使用 github里边，

  3. 所属分类：其它

    • 发布日期：2020-11-21
    • 文件大小：71680
    • 提供者：weixin_38722891

  1. js实现整体缩放页面适配移动端

  2. 大家在适配页面的Web端和移动端时候，如果不需要那么麻烦，就可以使用js进行整体缩放，只需要引入一个js,改动htmll头部代码即可 切记： 1.该 JS 应在 head 中尽可能早的引入，减少重绘。 2.定宽（视窗缩放)： 对应 meta 标签写法 – 750 是效果图内容区域的宽度，一般为 640 或 750 html头部代码： <meta name="viewport" content="width=device-width,

  3. 所属分类：其它

    • 发布日期：2020-11-21
    • 文件大小：52224
    • 提供者：weixin_38592758

  1. flexible.js实现移动端rem适配方案

  2. 需要了解的基础知识： 物理像素：物理像素又被称为设备像素，他是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。正是这些设备像素的微小距离欺骗了我们肉眼看到的图像效果。 设备独立像素：也称为密度无关像素，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)，然后由相关系统转换为物理像素。 设备像素比：简称为dpr，其定义了物理像素和设备独立像素的对应关系。它的值可以按此公式计算得到：设备像素比 ＝ 物理像素 / 设备独立像素

  3. 所属分类：其它

    • 发布日期：2020-11-20
    • 文件大小：218112
    • 提供者：weixin_38635166

  1. 深入理解移动前端开发之viewport

  2. 在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。 一、viewport的概念 通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览

  3. 所属分类：其它

    • 发布日期：2020-12-02
    • 文件大小：303104
    • 提供者：weixin_38509656

  1. 微信小程序中吸底按钮适配iPhone X方案

  2. 随着第二三批iPhone X的陆续到货，身边的土豪们纷纷用了起来，因为iPhone X的齐刘海导致的适配问题很多，所以这群土豪更沉浸在各种找bug中，不出所料，豌豆公主小程序在一些地方也出现了一丢丢体验不好的地方，主要是商品详情页和购物车的吸底按钮栏，会与 Home Indicator 横条重叠，这样在点击下方按钮时很容易误触发手势操作，如下图：   截图来自网络，侵删 是bug就得修，是体验问题就得优化，于是立马搞了一台iPhone X开始研究。 网页端的适配还好，有 viewport met

  3. 所属分类：其它

    • 发布日期：2020-11-29
    • 文件大小：153600
    • 提供者：weixin_38581447

  1. vue项目中使用lib-flexible解决移动端适配的问题解决

  2. 第一部分：项目中引入lib-flexible 一、项目中安装lib-flexible $ npm install lib-flexible --save 二、在项目的入口js文件中引入lib-flexible import 'lib-flexible' 通过要以上两步，就完成了在vue项目使用lib-flexible来解决移动端适配了。 lib-flexible会自动在html的head中添加一个meta name=”viewport”的标签，同时会自动设置html的font-size为屏幕

  3. 所属分类：其它

    • 发布日期：2020-12-09
    • 文件大小：44032
    • 提供者：weixin_38677472

  1. viewport 的基本原理以及详细使用方法

  2. 一.viewport的概要 移动端浏览器通常都在一个比屏幕更宽的虚拟窗口中渲染页面，这个虚拟窗口就是viewport，目的是正常展示没有做移动端适配的网页，可以让他们完整的展现给用户。我们有时用移动设备访问桌面版网页就会看到一个横向滚动条，这里可显示区域的宽度就是viewport的宽度。 常规使用，页面可以缩放就用下面的代码 如果不想页面缩放就用下面的代码 <meta name="viewport" content="width=device-wi

  3. 所属分类：其它

    • 发布日期：2020-12-14
    • 文件大小：60416
    • 提供者：weixin_38709466

  1. vue做移动端适配最佳解决方案(亲测有效)

  2. vw 解决方案 1. 安装并配置PostCss插件 代码如下:npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano –S 2. 对 PostCss 进行配置 找到在根目录中的.postcssrc.js，对PostCSS插件进行配置 module.exports = { "plugins": {

  3. 所属分类：其它

    • 发布日期：2020-12-04
    • 文件大小：51200
    • 提供者：weixin_38692100

  1. 微信小程序适配iphoneX的实现方法

  2. 一、 安全区域(safe area) 与iPhone6/6s/7/8相比，iPhone X 无论是在屏幕尺寸、分辨率、甚至是形状上都发生了较大的改变，下面以iPhone 8作为参照物，先看看iPhone X尺寸上的变化： 苹果对于 iPhone X 的设计布局意见如下： 核心内容应该处于 Safe area 确保不会被设备圆角(corners)，传感器外壳(sensor housing，齐刘海) 以及底部的 Home Indicator 遮挡。也就是说 我们设计显示的内容应该尽可能的在安全

  3. 所属分类：其它

    • 发布日期：2021-01-03
    • 文件大小：117760
    • 提供者：weixin_38548421

  1. 移动端前端适配方案(总结)

  2. 在网上搜了一下，很多面试都会被问到移动端适配方法的问题，最近看了一些文章，这里总结一下。 首先，谈一下目前为止出现的一些关于移动端适配的技术方案： （1）通过媒体查询的方式即CSS3的meida queries （2）以天猫首页为代表的 flex 弹性布局 （3）以淘宝首页为代表的 rem+viewport缩放 （4）rem 方式 1.Media Queries meida queries 的方式可以说是我早期采用的布局方式，它主要是通过查询设备的宽度来执行不同的

  3. 所属分类：其它

    • 发布日期：2021-01-19
    • 文件大小：247808
    • 提供者：weixin_38742124

  1. 如何基于viewport vm适配移动端页面

  2. 前言 作为一个小前端，经常要和H5打交道，这就面临着不同终端的适配问题。 Flexible方案通过Hack手段来根据设备的dpr值相应改变标签中viewport的值，给我更贴切的体会就是通过js脚本根据设备的dpr和设计图的宽度来计算出html的font-size值，然后就运用rem单位开发可以等比例缩放的H5页面。 但是！Flexible已经完成了他自身的历史使命，我们可以放下Flexible，拥抱新的变化。 做到适配要解决的问题 在移动端布局，我们需要面对两个最为重要的问题：

  3. 所属分类：其它

    • 发布日期：2021-01-18
    • 文件大小：93184
    • 提供者：weixin_38628211

  1. 小程序中吸底按钮适配 iPhone X 方案

  2. 随着第二三批iPhone X的陆续到货，身边的土豪们纷纷用了起来，因为iPhoneX的齐刘海导致的适配问题很多，所以这群土豪更沉浸在各种找bug中，不出所料，豌豆公主小程序在一些地方也出现了一丢丢体验不好的地方，主要是商品详情页和购物车的吸底按钮栏，会与HomeIndicator横条重叠，这样在点击下方按钮时很容易误触发手势操作，如下图：截图来自网络，侵删 (此图片来源于网络，如有侵权，请联系删除! ) 是bug就得修，是体验问题就得优化，于是立马搞了一台iPhone X开始研究。  网页端的适

  3. 所属分类：其它

    • 发布日期：2021-03-29
    • 文件大小：139264
    • 提供者：weixin_38645669
« 12 »