Flex에 내장된 반응형 YouTube

반응형 YouTube 및 일부 다른 콘텐츠를 Flex 컨테이너에 포함하려고 시도했지만 YouTube가 포함된 컨테이너가 커지지 않아 겹치거나 다른 요소와 겹칩니다. 잘 설명했는지 모르겠어서 보여드리기 위해 코드와 박스도 만들어봤습니다: https://codesandbox.io/s/objective-mountain-m4dhhb?file=/src/App.jsimport{Box,Paper }from"@mui/mat

P粉111641966 2024-03-21 23:20:29 0  1  424

vue-chartjs 및 Pinia를 사용하여 저장된 반응형 데이터

저는 Pinia를 사용하여 데이터를 저장하고 vue-chartjs를 결합하여 반응형 차트를 만드는 데 능숙하지 않습니다. 이 예를 가이드로 사용하고 있지만 차트가 스토어의 변경 사항에 반응하도록 만드는 데 어려움을 겪고 있습니다. 반응형 양식을 사용하여 다른 구성 요소에서 Pinia 매장 데이터를 변경했는데 매장 데이터가 변경되는 것을 볼 수 있지만 차트가 업데이트되지 않습니다. 차트를 렌더링하기 위해 다음 구성 요소를 사용하고 있습니다. <scriptsetup>import{storeToRefs}from'pinia'imp...

P粉946437474 2023-08-31 00:26:42 0  1  584

ionic Angular 및 ngfor에서 반응형 그리드를 만드는 방법은 무엇입니까?

ionicAngular 및 ngfor에서 반응형 그리드를 만드는 방법은 무엇입니까? 내 그리드 템플릿에 대해 여기에 이미지 설명을 입력하세요. <ion-grid><ion-row><ion-col><ion-item*ngFor="letprodofdisplayedList" class="item-entry"detailrouterLink=&quot

P粉106715703 2023-09-14 22:57:49 0  1  667

SVG 이미지를 사용하여 반응형 그리드 영역을 만들 수 없습니다

svg 이미지가 포함된 반응형 그리드 영역을 만들려고 하면 임의의 그리드 영역 너비와 같은 이상한 동작이 발생하고 이미지가 멈추지 않고 특정 지점까지 커지거나 줄어들 수 없습니다. 내가 얻은 가장 가까운 것은 *{box-sizing:border-box;}body{margin:0;}header{display:grid;grid-template-columns:auto1fr; background-color:green;padding:1r

P粉022140576 2023-08-30 19:15:16 0  1  667

Angular에서 반응형 양식 데이터를 편집하는 필수 방법인 Observable을 구독할 필요가 없습니다.

관찰 가능한 데이터를 기반으로 반응형 양식을 구독하고 업데이트하는 데 사용한 프로세스는 다음과 같습니다. Observable을 구독하고 값을 변경하지 않고 문제를 해결하는 방법이 있을 수도 있습니다. @Component({selector:'app-my-comComponent',template:`<form[formGroup]="myForm"><inputformControlName="name"/>

P粉587970021 2024-03-29 18:37:15 0  1  419

제목을 다음과 같이 다시 작성합니다. 하나의 항목이 true로 설정되고 다른 항목은 모두 false로 설정된 VueJS 반응형 요소

VueJS의 구성 API를 사용하여 애플리케이션을 개발 중입니다. 페이지의 모든 버튼을 클릭할 때 constsections=reactive({section1:true,section2:false,section3:false,section4:false,section5:false,section6:false}) 아래와 같이 반응형 요소를 설정했습니다. (다른 많은 작업 중에서) 부울 값을 기반으로 개별 요소를 표시하고 숨기고 싶습니다.

P粉786800174 2023-08-28 20:55:03 0  1  625

반응형 모달 슬라이딩 애니메이션

반응 및 CSS에 모달을 구현했으며 현재 열 때 모달이 아래쪽에서 위로 미끄러지는 슬라이드 업 애니메이션을 구현했지만 닫으면 아래로 내려가고 싶습니다. 스와이프, 어떻게 해야 할지 모르겠습니다. 아래로 스와이프 애니메이션을 정확하게 생성하려면 누구든지 도와줄 수 있나요? 코드=>import"./styles.css";importreact,{useState}from"react";exportdefault

P粉514458863 2023-08-30 22:49:29 0  1  639

가변 열에 반응형 블록 배치

머리글, 보드, 바닥글이 있는 게임 웹사이트가 있습니다. 뷰포트 안에 들어가려면 세 개가 모두 필요합니다. 이를 달성하려면 보드가 더 작아야 합니다. 축소가 내가 겪고 있는 문제입니다. 너비는 반응적으로 얻을 수 있었지만 높이는 제한적으로 얻을 수 없었습니다. 보드는 정사각형을 유지하고 사용되지 않는 공간을 차지하거나 넘침을 방지하기 위해 축소되어야 합니다. 아래 내용에 따라 뭔가를 하고 있는데 보드가 부모의 키를 초과하게 됩니다. 실제 코드에서는 줄 바꿈으로 인해 헤더 높이를 알 수 없습니다. 바닥글에는 다양한 양의 텍스트가 있습...

P粉545682500 2023-09-03 19:51:51 0  2  672

반응형 드롭다운 메뉴를 만드는 방법

햄버거 메뉴 아이콘은 오른쪽에, 이미지는 왼쪽에 있어야 합니다. 메뉴를 클릭하여 열면 로고homeAboutusgallerycontact가 있는 드롭다운 메뉴가 확장되어야 합니다. <divclass="직사각형1"><ulclass="dropdown"><liclass="li1"><ahref="

P粉521013123 2023-09-04 15:47:42 0  2  695

이미지와 콘텐츠로 반응형 페이지 디자인

저는 프런트 엔드를 처음 접했고 레이아웃과 응답성을 다루는 데 몇 가지 문제가 있습니다. 이것은 지금까지 내 코드입니다: body{margin:0; background-color:#353535;}.header{color:white;text-align:center;font-size:20px;margin:auto;font-family :'Inter ',serif;글꼴-가중치:bold;너비:700px;

P粉676588738 2023-09-07 15:55:30 0  1  590

css3 - 그래픽 및 텍스트 반응형 스타일

PC 데스크탑에서 이 페이지를 반응형으로 만들기: 한 가지 방법은 그림을 직접 반응형으로 만드는 것입니다. 유일한 단점은 텍스트가 흐릿하고 효과가 완벽하지 않다는 것입니다. , 이런 식으로 텍스트 크기는 적응적이어야 하며 텍스트 위치 관계는 잘 수행하기가 훨씬 더 어렵습니다...

習慣沉默 2017-05-16 13:20:57 0  3  785

배경 이미지에 반응형 PNG 이미지가 있나요?

다음과 같은 페이지 디자인을 만들려고 합니다. 클릭하고 실제로 성공했습니다. 문제는 웹 페이지의 해상도를 변경할 때 요소가 겹치고 배경 div와 PNG가 다르게 작동하고 모든 것이 형편없어 보인다는 것입니다. (위치:절대(PNG) 및 위치:상대(배경)을 사용해 보았습니다.)

P粉107991030 2024-02-21 21:06:46 0  1  513

Flexbox를 사용하여 반응형 레이아웃을 구현하는 방법

Flex 컨테이너 내부에 xy개의 카드와 단일 위젯을 렌더링하는 React 앱을 만들고 있습니다. 모든 카드의 너비와 높이는 동일하지만 위젯의 높이는 카드 높이 * 2 + 행 간격과 같습니다. 컨테이너의 너비는 뷰포트 너비에 따라 변경되며 시각적으로 카드가 있는 2열 또는 3열로 각각 표시되어야 합니다. 더 명확하게 하기 위해 위젯이 파란색으로 표시된 필수 레이아웃의 모형 이미지를 제공했습니다. 내가 무엇을 시도하더라도 행의 높이를 해당 크기로 변경하지 않고는 위젯을 올바른 위치에 표시할 수 없습니다.

P粉733166744 2024-02-26 19:29:01 0  2  494

반응형 이미지와 텍스트 Div를 나란히 배치

그래서 하나의 div는 이미지이고 다른 하나는 배경이 있는 텍스트인 템플릿을 만들려고 합니다. 이제 텍스트가 특정 픽셀 너비의 이미지 아래에 있도록 이 템플릿을 반응형으로 만들고 싶습니다. stackoverflow를 거치면서 Flexbox를 사용해야 한다는 글을 수없이 보았습니다. 노력했지만 제대로 할 수 없었습니다. 따라서 데스크톱에서는 다음과 같아야 합니다: https://i.stack.imgur.com/HDehv.jpg 스마트폰에서는 여기로 점프해야 합니다 https://i.stack.im

P粉005134685 2024-04-02 08:59:38 0  1  580

html5 - 반응형 웹, 미디어 쿼리 문제.

{code...} 이 두 미디어 쿼리와 관련하여 장치 너비가 정확히 768px인지 묻고 싶습니다. 그러면 어떤 미디어 쿼리가 여기에 적용되는지, 아니면 두 번째 미디어 쿼리는 (x&gt;=768&&x&lt;1200? ?). 그리고, 이 두 언론 문의에도 순서가 있나요?

漂亮男人 2017-07-03 11:41:25 0  1  1535

Vue 스크립트 설정에서 반응형 객체 구조 파괴

Vue3 설명서를 따라 <scriptsetup> 태그를 사용하여 구성 요소 코드를 단순화하는 방법을 확인하고 있습니다. 이 설정을 사용하는 이점 중 하나는 객체를 명시적으로 반환하기 위해 더 이상 내보내기 기본 상용구를 사용할 필요가 없다는 것입니다. 최상위 범위에 선언된 모든 항목은 자동으로 템플릿에서 사용할 수 있습니다. 내가 겪고 있는 문제는 내 앱에 초기 상태로 매우 큰 개체가 있고 일반 Vue3 앱에서 해당 개체를 반환하고 다음과 같이 자동으로 구조 해제할 수 있다는 것입니다.

P粉418214279 2024-03-25 20:03:34 0  1  567

모바일 장치가 반응형 레이아웃 카드를 올바르게 표시하지 않습니다.

설명 웹페이지를 만들 때 모바일 버전을 사용해보기 전까지 ChromeDevTools에서는 모든 것이 예상대로 작동했습니다. 왜 이런 일이 발생합니까? 그런 문제가 발생하지 않았습니다. 재현 단계 이는 데스크톱 버전에서 발생하는 현상입니다. 너비를 줄인 후: 이는 예상된 결과입니다. 모바일 버전을 활성화하면 갑자기 작동하지 않습니다. flex+flex-wrap+flex-direction을 사용하거나 Grid+grid-template-columns:Repeat(auto-fit,minmax를 사용해도 마찬가지입니다.

P粉878510551 2024-03-19 22:21:02 0  1  498

반응형 모드에서 목록을 도구 모음으로 변경할 수 있나요?

나는 다음과 같은 카드를 가지고 있습니다. nav에는 많은 항목이 있습니다(간단히 설명하기 위해 여기에 하나를 남겨 두었습니다). <divclass="col-md-3"><divclass="card"><divclass="card-header"><h3class="card-title">제목</h3>&lt

P粉743288436 2024-04-02 16:09:27 0  1  488

CSS - 배경 이미지가 포함된 반응형 레이아웃을 작성하는 방법

이와 비슷하게 이제 배경 이미지로 컴포넌트를 만들고 싶은데 배경 이미지의 크기가 100%가 될 수 없고 가운데에 컨텐츠가 있어야 하고 왼쪽에는 이미지, 오른쪽에는 텍스트가 있어야 만드는 방법입니다. 반응이 좋나요?

怪我咯 2017-07-06 10:37:20 0  3  2179

고정된 이미지 크기를 유지하면서 반응형 디자인을 달성하는 방법은 무엇입니까?

이미지가 늘어나지 않고 16:9 컨테이너에 맞도록 이미지 크기를 조정하는 다음 CSS(부트스트랩 사용)가 있습니다.

P粉739706089 2023-08-16 14:35:27 0  1  536