移动端REM和Viewport(VW)布局解决方案常见问题解答-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00829/article/details/144033682

移动端REM和Viewport(VW)布局解决方案常见问题解答

rem-vw-layout 移动端 REM布局与 Viewport (VW) 布局的实例运用项目地址: https://gitcode.com/gh_mirrors/re/rem-vw-layout

项目基础介绍

本项目是一个移动端布局的解决方案，主要结合了REM和Viewport(VW)两种布局方式。它提供了三种不同的布局方案，以适应不同的设计和开发需求。项目使用的主要编程语言包括CSS、HTML和JavaScript。

新手常见问题及解决步骤

问题一：如何配置和启动项目？

问题描述： 新手在使用本项目时，不知道如何配置和启动项目。

解决步骤：

克隆项目到本地：使用Git命令 git clone https://github.com/imwtr/rem-vw-layout.git 将项目下载到本地。
进入项目目录：在终端中输入 cd rem-vw-layout 进入项目目录。
启动Node服务：在项目目录中运行 node server 命令启动Node服务。
访问页面：在浏览器中输入 http://localhost:4321/rem/index.html、http://localhost:4321/vw/index.html 或 http://localhost:4321/vw-rem/index.html 来访问不同的布局方案。

问题二：如何设置页面最大最小宽度？

问题描述： 新手在使用本项目时，不知道如何设置页面的最大最小宽度。

解决步骤：

在HTML文件中添加 data-content-max 属性，例如：<html data-content-max="640">。

通过修改CSS中的对应规则来设置最大最小宽度，例如：

@media (max-width: 640px) {
    .container {
        max-width: 640px;
        min-width: 320px;
    }
}

问题三：如何支持高清设备的1px边框？

问题描述： 新手在使用本项目时，不知道如何在高清设备上实现1px的边框。

解决步骤：

在CSS中使用 transform: scale() 属性来调整边框的尺寸，例如：

@mixin border-1px($color) {
    position: relative;
    &:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: $color;
        transform: scale(0.5);
        transform-origin: bottom left;
    }
}