uniapp에서 웹페이지 스타일을 제거하는 방법-uni-app-php.cn

uniapp에서 웹페이지 스타일을 제거하는 방법

PHPz

풀어 주다： 2023-04-18 09:57:16

원래의

1361명이 탐색했습니다.

이제 점점 더 많은 웹사이트가 모바일 단말기에 자체 애플리케이션을 갖고 있으며, 일부 새로운 모바일 애플리케이션 개발 프레임워크가 서서히 대중의 주목을 받고 있습니다. UniApp은 Vue.js 및 WeChat 애플릿 구성 요소 라이브러리를 기반으로 완전히 개발되었으며 동시에 여러 플랫폼에서 실행할 수 있는 인기 있는 모바일 애플리케이션 개발 프레임워크 중 하나입니다. 그러나 실제 개발에서는 UniApp의 기본 웹 페이지 스타일이 개발자에게 불만족스러울 수 있습니다. 이 기사에서는 UniApp의 기본 웹 페이지 스타일을 제거하는 방법에 대해 설명합니다.

1단계: UniApp 기본 CSS 스타일 지우기

UniApp의 기본 CSS 스타일은 기본 스타일 시트 파일에 있으며 사용자 정의 CSS 파일을 도입하여 일부 스타일을 재정의할 수 있습니다. 구체적인 작업은 다음과 같습니다.

프로젝트의 정적 디렉터리에 reset.css라는 새 파일을 만듭니다. reset.css的文件。
在该文件中写下以下内容：

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/*自定义的其他样式*/

로그인 후 복사

该段代码是通过重写HTML所有元素的默认值来清空UniApp的默认CSS样式（其中包括margin，padding，border等属性），相当于从底层开始搭建自己的样式。我们还可以在该段代码的下方加入其他自定义的CSS样式来进一步美化网页。

在App.vue组件中引用该CSS文件。在template标签内加入以下代码：

<style lang="scss" rel="stylesheet">
  @import "../static/reset.css";
</style>

로그인 후 복사

这就是通过在App.vue组件中引用外部CSS文件的方式来清除UniApp默认CSS样式。在这里我们采用了import的方式，以免在HTML文件中重复加入样式文件。

第二步：reset全局CSS样式

在清空了UniApp默认CSS样式后，我们需要再加入一些reset全局CSS样式，这样才可以免除后期开发中的一些麻烦。

在项目的static目录下新建一个名为common.scss

html, body {
    height: 100%;
    min-height: 100%;
}

body {
    color: #333;
    font-size: 15px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color: #fff;
}

input[type="text"], input[type="number"], input[type="password"] {
    -webkit-appearance: none;
    -webkit-border-radius: 0;
}
input[type="submit"], input[type="button"], button {
    border: none;
    outline: none;
    background-color: tranparent;
    cursor: pointer;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/*自定义的其他样式*/

로그인 후 복사

이 코드는 모든 HTML 요소의 기본값을 다시 작성하여 UniApp의 기본 CSS 스타일(여백, 패딩, 테두리 및 기타 속성 포함)을 지웁니다. 맨 아래 레이어부터 시작하여 자신만의 스타일을 구축하기 시작합니다. 또한 이 코드 아래에 다른 사용자 정의 CSS 스타일을 추가하여 웹 페이지를 더욱 아름답게 만들 수도 있습니다.

<style lang="scss" rel="stylesheet">
  @import "../static/common.scss";
</style>

로그인 후 복사

App.vue 컴포넌트에서 외부 CSS 파일을 참조하여 UniApp 기본 CSS 스타일을 삭제합니다. 여기서는 스타일 파일을 HTML 파일에 반복적으로 추가하는 것을 피하기 위해 가져오기 방법을 사용합니다.

2단계: 전역 CSS 스타일 재설정

UniApp 기본 CSS 스타일을 지운 후 나중에 개발 시 문제가 발생하지 않도록 재설정된 전역 CSS 스타일을 추가해야 합니다. 🎜🎜🎜프로젝트의 정적 디렉터리에 common.scss라는 새 파일을 만듭니다. 🎜🎜파일에 다음 내용을 작성하세요. 🎜🎜rrreee🎜이 CSS 스타일은 서로 다른 플랫폼 간의 일부 스타일 불일치를 해결할 수 있습니다. 예를 들어, iOS와 Android 플랫폼에서는 입력 상자의 둥근 모서리가 다릅니다. 이 코드를 사용하면 다양한 플랫폼에서 입력 상자의 일관성을 유지할 수 있습니다. 동시에 이 코드는 버튼과 같이 일반적으로 사용되는 일부 UI 구성 요소도 대상으로 합니다. 다양한 플랫폼에서 스타일의 일부 불일치를 해결할 수 있습니다. 🎜🎜🎜App.vue 구성 요소에서 이 CSS 파일을 참조하세요. 이전과 마찬가지로 템플릿 태그에 다음 코드를 추가합니다. 🎜🎜rrreee🎜Summary🎜🎜위 단계를 통해 UniApp 개발에서 기본 웹 페이지 스타일을 제거하고 웹 페이지의 개인화 된 디자인을 얻을 수 있습니다. 그중에서도 모든 요소의 기본 스타일을 지우고 하단부터 스타일을 맞춤설정했으며, 전역 CSS 스타일을 재설정하여 다양한 플랫폼 간의 일부 스타일 비호환 문제를 해결했습니다. 결국 우리는 더욱 세련되고 아름다운 UniApp 애플리케이션을 얻게 되었습니다. 🎜

위 내용은 uniapp에서 웹페이지 스타일을 제거하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!