{"id":31967909,"url":"https://github.com/flonny/pxtovw-css","last_synced_at":"2026-05-17T19:39:37.281Z","repository":{"id":44120960,"uuid":"154421135","full_name":"flonny/pxToVw-css","owner":"flonny","description":"移动端适配方案,webpack 插件 ","archived":false,"fork":false,"pushed_at":"2022-12-02T14:44:56.000Z","size":888,"stargazers_count":2,"open_issues_count":15,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-10-14T18:43:46.656Z","etag":null,"topics":["gulp","px","rem","sass","vw"],"latest_commit_sha":null,"homepage":"https://github.com/flonny/pxtovw-loader","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/flonny.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-10-24T01:40:28.000Z","updated_at":"2020-12-21T13:31:16.000Z","dependencies_parsed_at":"2023-01-23T10:30:18.176Z","dependency_job_id":null,"html_url":"https://github.com/flonny/pxToVw-css","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/flonny/pxToVw-css","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flonny%2FpxToVw-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flonny%2FpxToVw-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flonny%2FpxToVw-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flonny%2FpxToVw-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/flonny","download_url":"https://codeload.github.com/flonny/pxToVw-css/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flonny%2FpxToVw-css/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33152281,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-17T09:28:26.183Z","status":"ssl_error","status_checked_at":"2026-05-17T09:27:52.702Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gulp","px","rem","sass","vw"],"created_at":"2025-10-14T18:43:45.052Z","updated_at":"2026-05-17T19:39:37.253Z","avatar_url":"https://github.com/flonny.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# pxToVw\n\n- 移动端适配方案\n\n- 设置屏幕宽度 或者 设计稿宽度为750px（宽）\n- 100vw = 750\n- 1个单位（宽） 为 （100/750)vw\n- 如果设计稿宽度为640px\n- 将设置宽度改为640px \n- 通过sass 函数去进行页面布局\n\n### 使用\n```\ngit clone https://github.com/fanyuedong/pxToVw.git\ncd pxToVw\nnpm install\ngulp\n```\n#### 核心函数\n```scss\n$screenwidth: 750;\n@function pxToVw($n) {\n  @return unquote($n * 100/$screenwidth+'vw');\n}\n```\n#### 使用\n```scss\n@import 'pxToVw';\nbody{\n  padding: 0;\n  margin: 0;\n}\n\n\n.temp {\n  text-align: center;\n  font-size: pxToVw(200);\n  line-height: pxToVw(280);\n  opacity: 0.8;\n}\n\n.weather {\n  font-size: pxToVw(40);\n  line-height: pxToVw(56);\n  opacity: 0.65;\n  text-align: center;\n}\n\n.weather-wrapper {\n  position: relative;\n  padding-top: pxToVw(174);\n  padding-bottom: pxToVw(250);\n}\n\n.weather-bg {\n  z-index: -1;\n  top: 0;\n  left: 0;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n\n.timetips {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-top: pxToVw(40);\n  margin-bottom: pxToVw(45);\n}\n\n.timetips-icon {\n  margin-right: pxToVw(10);\n  width: pxToVw(36);\n  height: pxToVw(28);\n}\n\n.timetips-text {\n  font-size: pxToVw(30);\n  line-height: pxToVw(42);\n  opacity: 0.5;\n}\n\n.forecast-lsit {\n  display: flex;\n  width:pxToVw(750);\n  overflow: scroll;\n}\n\n```\n---\n### gulp3 升级 gulp4 遇到的报错\n\n#### 问题一\n\n```js\nTask function must be specified\n```\n#### 解决\n```js\ngulp.task('default', ['styles', 'script'], () =\u003e {\n  gulp.watch('./sass/**/*.scss', ['styles']);\n  gulp.watch('./js/**/*.js', ['script']);\n  browsersync.init({\n    watch: true,\n    server: './',\n  });\n});\n```\n\n修改为\n```js\ngulp.task('default', gulp.series('styles', 'script', () =\u003e {\n  gulp.watch('./sass/**/*.scss', ['styles']);\n  gulp.watch('./js/**/*.js', ['script']);\n  browsersync.init({\n    watch: true,\n    server: './',\n  });\n}));\n```\n\n#### 问题二\n```js\nTask never defined: styles\n```\n\n#### 解决\n\n\u003e 将\n\u003e task('styles',function(){}) \n\u003e 放置在\n\u003e task('defined',function(){})\n\u003e 前\n\n#### 问题三\n```\nCannot read property 'apply' of undefined\n```\n#### 解决\n```\nnpm i gulp-cli -g\n```\n\n#### 问题四\n```\nThe following tasks did not complete\n```\n#### 解决\n```\ngulp.task('styles', () =\u003e {\n  gulp.src('./sass/**/*.scss')\n    .pipe(sass.sync({\n      outputStyle: 'compressed',\n    }).on('error', sass.logError))\n    .pipe(autoprefixer({\n      browsers: ['last 2 versions'],\n    }))\n    .pipe(gulp.dest('./css'));\n});\n```\n##### 修改为\n```\ngulp.task('styles', (done) =\u003e {\n  gulp.src('./sass/**/*.scss')\n    .pipe(sass.sync({\n      outputStyle: 'compressed',\n    }).on('error', sass.logError))\n    .pipe(autoprefixer({\n      browsers: ['last 2 versions'],\n    }))\n    .pipe(gulp.dest('./css'));\n  done();\n});\n```\n#### 问题五\n```\nError: watching ./sass/**/*.scss: watch task has to be a function (optionally generated by using gulp.parallel or gulp.series)\n```\n#### 解决\n\u003e 与问题一解决方法一致\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflonny%2Fpxtovw-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflonny%2Fpxtovw-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflonny%2Fpxtovw-css/lists"}