简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

웹에서의 미디어 쿼리 방법

一个新手
풀어 주다： 2017-10-05 15:32:50
원래의
1809명이 탐색했습니다.

포지셔닝 레이아웃

미디어 쿼리 코드: 

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .a {
    border: 1px solid #000000;
    width: 100px;
    height: 100px;
    background-color: #000000;
}
@media only screen and (min-width: 300px) and (max-width: 640px) {
    .a {
    background-color: red;
}
} @media only screen and (min-width: 700px) {
    .a {
    background-color: green;
}
} @media only screen and (max-width:200px ) {
    .a {
    background-color: blue;
}
} </style> </head> <body> <p class="a"></p> </body></html>
로그인 후 복사

위 내용은 웹에서의 미디어 쿼리 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
web 方法 查询
원천：php.cn
이전 기사：JS의 MD5 암호화 방법 다음 기사：리덕스를 이해하는 방법
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
웹 애플리케이션 및 PWA의 경험을 개선하기 위해 투명한 브라우저를 실행합니다. [정적 HTML, CSS 및 JavaScript 지원] [사용자가 웹 애플리케이션/PWA에서 데스크탑 배경화면을 볼 수 있도록 허용] 저는 현재 소켓을 사용하여 웹 애플리케이션(채팅)을 개발하고 있는 주니어 프런트 엔드 개발자이자 디자이너입니다. 나와 친구들이 사용하는 언어는 Scala, HTM...
에서 2024-04-05 13:50:12
0
1
1367
웹 페이지 크기를 조정할 때 부트스트랩 스위치가 제대로 작동하지 않습니다. 这是代码：<navxmlns:sec="http://www.thymeleaf.org/extras/spring-security"class=&qu...
에서 2024-04-05 08:45:39
0
1
3443
웹 사이트 페이지에서 로컬에 설치된 라이브러리 사용 Windows 운영 체제용으로 작성되고 최신 브라우저의 system32에 등록된 라이브러리(.dll, .ocx)를 사용하여 사이트 작업 및 계산 논리의 일부 기능...
에서 2024-04-05 00:15:49
0
1
3563
특정 클릭 이벤트를 수신하고 다른 클릭 이벤트는 억제하는 방법은 무엇입니까? 내 웹 애플리케이션에는 각 행이 특정 URL(<table><trdata-url="https://www.google.com">...
에서 2024-04-04 16:55:27
0
1
317
Javascript - Mocha Chai 단위 테스트가 실행되지 않습니다. 저는 프론트엔드 웹 개발 과정 부트캠프를 통해 프로젝트를 진행하고 있는데 안타깝게도 교수님께서 제 질문에 답해 주실 수 없습니다. 나는 두 명의 플레이어가 참여하...
에서 2024-04-02 14:52:19
0
1
356
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！