{"id":15307952,"url":"https://github.com/wscats/layout-demo","last_synced_at":"2025-07-01T09:07:47.455Z","repository":{"id":72736071,"uuid":"63374490","full_name":"Wscats/layout-demo","owner":"Wscats","description":"Various Layouts Of CSS","archived":false,"fork":false,"pushed_at":"2019-11-22T09:09:01.000Z","size":12969,"stargazers_count":302,"open_issues_count":0,"forks_count":20,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-04-13T11:06:28.346Z","etag":null,"topics":["column","css","em","flexbox","layout","rem","responsive-layout"],"latest_commit_sha":null,"homepage":"https://wscats.github.io/layout-demo/layout/%E5%BC%B9%E6%80%A7%E7%9B%92%E5%B8%83%E5%B1%80/demo/","language":"Lua","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/Wscats.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,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2016-07-14T22:40:27.000Z","updated_at":"2025-02-23T08:26:07.000Z","dependencies_parsed_at":null,"dependency_job_id":"715b3b0b-05b7-4f0d-840a-4a5138c47455","html_url":"https://github.com/Wscats/layout-demo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Wscats/layout-demo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wscats%2Flayout-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wscats%2Flayout-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wscats%2Flayout-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wscats%2Flayout-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Wscats","download_url":"https://codeload.github.com/Wscats/layout-demo/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wscats%2Flayout-demo/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262933317,"owners_count":23386784,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["column","css","em","flexbox","layout","rem","responsive-layout"],"created_at":"2024-10-01T08:13:05.782Z","updated_at":"2025-07-01T09:07:47.414Z","avatar_url":"https://github.com/Wscats.png","language":"Lua","funding_links":[],"categories":[],"sub_categories":[],"readme":"## 页面结构布局\n\n\n- [百分比布局](https://wscats.github.io/layout-demo/layout/百分比布局/demo)\n- [弹性盒布局](https://wscats.github.io/layout-demo/layout/弹性盒布局/demo)\n- [分栏布局](https://wscats.github.io/layout-demo/layout/%E5%88%86%E6%A0%8F%E5%B8%83%E5%B1%80/demo/)\n- [响应式布局](https://wscats.github.io/layout-demo/layout/自适应布局%2B响应式布局/demo)  [文档](https://github.com/Wscats/layout-demo/blob/gh-pages/layout/自适应布局%2B响应式布局/doc/自适应布局与响应式布局.md)\n\n\n## 单位\n\n`px`单位的名称为像素，它是一个固定大小的单元，像素的计算是针对屏幕的，一个像素`1px`就是屏幕上的一个点，即屏幕分辨率的最小分割。由于它是固定大小的单位，单独用它来设计的网页，如果适应大屏幕电脑，在小屏幕手机上就会很不友好，做不到自适应的效果\n- [px](https://wscats.github.io/layout-demo/layout/移动端布局/demo/px.html)\n\n`em`单位的名称为相对长度单位，它是用来设置文本的字体尺寸的，它是相对于当前对象内文本的字体尺寸；如果没有人为设置当前对象内文本的字体尺寸，那么它相对的是浏览器默认的字体尺寸`16px`\n- [em](https://wscats.github.io/layout-demo/layout/移动端布局/demo/em.html)\n\n相对长度单位，它的出现是为了解决`em`的缺点，`em`可以说是相对于父级元素的字体大小，当父级元素字体大小改变时，又得重新计算。`rem`出现就可以解决这样的问题，`rem`只相对于根目录，即`HTML`元素。所以只要在`HTML`标签上设置字体大小，文档中的字体大小都会以此为参照标准，一般用于自适应布局\n- [rem](https://wscats.github.io/layout-demo/layout/移动端布局/demo/rem.html)\n\n`view height`和`view width`的简写，是指可视窗口的高度。假如高度是1200px的话。那10vh就是120px，即`1 vh = 1200px/100 = 12 px`\n- [vw和vh](https://wscats.github.io/layout-demo/layout/移动端布局/demo/vw-vh.html)\n\n总结：\n\n- `px`是固定长度单位，不随其它元素的变化而变化\n- `em`和`%`是相对于父级元素的单位，会随父级元素的属性`font-size`或其它属性变化而变化\n- `rem`是相对于根目录`HTML`元素的，所有它会随`HTML`元素的属性`font-size`变化而变化\n- `px`和`%`用的比较广泛一些，可以充当更多属性的单位，而`em`和`rem`是字体大小的单位，用于充当`font-size`属性的单位\n- 一般来说：`1em = 1rem = 100% = 16 px`\n\n## 视口\n\n- [viewpoint](https://github.com/Wscats/iPhone-X)\n\n\u003e 移动设备上的`viewport`就是设备的屏幕上能用来显示我们的网页的那一块区域\n\n* 布局视口（layout viewport）\n\n以屏幕分辨率为基准，实际上布局视口的宽度要比屏幕宽出很多，以上图片显示的尺寸就是 layout viewport\n\n* 视觉视口（visual viewport）\n\n`layout viewport`的宽度是大于浏览器可视区域的宽度的，所以我们还需要一个`viewport`来代表 浏览器可视区域的大小，这个`viewport`叫做`visual viewport`。在`JS`中可以通过`window.innerWidth`来获取\n\n* 理想视口（ideal viewport）\n\n一个能完美适配移动设备的视口，需要手动添加`meta`标签，一般视口大小都设置为设备大小\n\n```html\n\u003cmeta name=\"viewport\" content=\"width=device-width\"\u003e\n```\n\n举个例子，手机上的浏览器是全屏的，手机实际宽度是320像素(即`visual viewport`)，而手机分辨率是980宽度(即`layout viewport`)，所以手机上打出来的是980而不是320，如果设置了`meta`完美适配设备(即`ideal viewport`)\n\n* meta标签属性\n\n\u003e 利用以下属性对`viewport`进行控制, 可多个同时使用，并用逗号隔开\n\n- `width`设置`layout viewport`的宽度，为一个正整数，或字符串`device-width`\n- `initial-scale`设置页面的初始缩放值，为一个数字，可以带小数\n- `minimum-scale`允许用户的最小缩放值，为一个数字，可以带小数\n- `maximum-scale`允许用户的最大缩放值，为一个数字，可以带小数\n- `user-scalable`是否允许用户进行缩放\n    - no代表不允许\n    - yes代表允许\n\n所以如果不定义`viewpoint`的话，页面宽度以屏幕分辨率为基准，而设置以后可以根据设备宽度来调整页面，达到适配终端大小的效果\n\n## 动态设置字体大小及viewport\n\n```js\n\u003cscript type=\"text/javascript\"\u003e\n    // 把尺寸放大N倍（N是window.devicePixelRatio）\n    // 物理像素*设备像素比=真实像素\n    var wd = document.documentElement.clientWidth*window.devicePixelRatio/10;\n    document.getElementsByTagName(\"html\")[0].style.fontSize = wd + \"px\";\n    \n    // 把屏幕的倍率缩小到N分之一（N是window.devicePixelRatio）\n    var scale = 1/window.devicePixelRatio;\n    var mstr = 'initial-scale='+ scale +', maximum-scale='+ scale +', minimum-scale='+ scale +', user-scalable=no';\n    document.getElementById(\"vp\").content = mstr;\n\u003c/script\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwscats%2Flayout-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwscats%2Flayout-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwscats%2Flayout-demo/lists"}