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

저는 프런트 엔드를 처음 접했고 레이아웃과 응답성을 다루는 데 몇 가지 문제가 있습니다. 이것은 지금까지 내 코드입니다: 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  500

채팅 gpt 응답 형식

내 React 애플리케이션에서 chat gptapi를 사용하고 있습니다. 내가 직면한 문제는 채팅 gpt의 응답 형식을 지정하는 방법입니다. 테이블 형식으로 응답을 요청하면 이상한 응답이 제공됩니다. 사전 표시를 사용하여 텍스트를 표시하고 응답에 첨부된 이미지가 이런 식으로 표시되지만 요청하면 chat gpt처럼 올바른 테이블을 원합니다. , 같은 방식으로 다른 줄의 항목 목록 대신 단락 형식으로 표시되므로 채팅 GPT 응답의 형식을 올바르게 지정하는 방법입니다. 채팅 GPT에 표시된 대로 올바른 테이블과 목록을 원합니다.

P粉563446579 2023-10-25 14:53:41 0  1  715

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

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

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

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

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

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

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

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

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

javascript - CSS 캐러셀 차트가 레이아웃 문제에 맞게 조정됩니다.

캐러셀 레이아웃과 유사하게 외부 파란색 컨테이너에는 너비가 설정되어 있지 않으며 100% 적응형입니다. 각 하위 컨테이너의 너비는 상위 컨테이너의 너비와 동일하며 상위 컨테이너 너머의 부분이 표시됩니다. 요소가 숨겨져 있습니다.js를 사용하지 않고 특정 상황에서 달성할 수 있나요?

给我你的怀抱 2017-06-13 09:23:41 0  3  1052

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  289

반응형 이미지와 텍스트 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  427

javascript -layui 테이블 레이아웃, td의 내용이 너무 많고 너무 길면 테이블 페이지가 압축되고 변형됩니다. 더 나은 레이아웃 방법을 찾고 있습니다.

제목에서 알 수 있듯이 페이지는 주로 관련 정보를 표시하는 데 사용됩니다. td에 내용이 너무 많으면 다음 줄이 압착됩니다. 더 나은 레이아웃 방법을 찾고 싶다면 반드시 테이블 레이아웃이 필요한 것은 아닙니다.]

迷茫 2017-07-06 10:35:25 0  2  1933

Vue 3에서 구성 요소 인스턴스에 대해 비응답 데이터를 설정하는 방법은 무엇입니까?

Vue2에도 비슷한 질문이 있었는데 $options를 사용하는 것이 좋습니다. 하지만 Vue3에서는 작동하지 않는 것 같습니다. 우선, Vue3 문서에는 $options가 읽기 전용이라고 나와 있습니다. 그래서 컴포넌트가 마운트된 인스턴스에서 툴팁을 초기화하려고 하면 매우 이상한 동작이 발생합니다. 툴팁이 표시되면 마지막으로 생성된 컴포넌트부터 표시되므로 $options가 어떻게든 "전역"인 것 같습니다. "? 툴팁을 데이터에 넣으면 모든 것이 잘 작동하지만 분명히 툴팁이 반응하지 않아야 합니다.

P粉973899567 2023-08-25 23:08:24 0  1  547

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  581

제목을 다음과 같이 다시 작성합니다. 하나의 항목이 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  520

가변 열에 반응형 블록 배치

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

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

css - 3열 레이아웃을 구현하기 위해 flex를 사용하는 방법은 무엇입니까? 하지만 하위 요소의 높이는 적응형이어야 합니까?

flex를 사용하여 그림에서 3열 레이아웃을 구현하려고 합니다. 현재 다음과 같은 문제가 발생합니다. 상위 요소가 display: flex를 설정하면 세 열의 높이가 같고 세 열의 높이를 원합니다. 열을 적응형으로 설정하려고 합니다. flex-direction:colum이나 flex-flow:row nowrap 중 어느 것도 원하는 효과를 얻을 수 없습니다...

滿天的星座 2017-05-16 13:45:22 0  1  1565

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  532

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

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

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

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

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

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

React.js CSS 창 너비

저는 React를 사용하여 반응형 웹사이트를 개발하고 있습니다. 스타일링에는 CSS 스타일시트를 사용합니다. 응답 부분은 @media 쿼리를 사용하여 CSS로 구현됩니다. 문제는 Chrome을 사용하면 요소가 더 크게 나타나고 레이아웃이 더 작은 화면(태블릿)에서 사이트에 액세스하는 것과 같다는 것입니다. 내가 이해하는 바는 Chrome이 뷰포트가 더 작다고 "생각"하고 적절한 정보로 미디어 쿼리에 응답한다는 것입니다. 일정 기간 정상적으로 작동한 후 개발 중에 문제가 발생했습니다. 내가 뭘 잘못하고 있고 어떻게 ...

P粉396248578 2024-03-31 16:31:23 0  1  462

내 이력서 제목

1. PHP 객체 지향 프로그래밍에 능숙하고 PSR4 사양을 엄격히 준수하며 좋은 코딩 습관을 가지고 있습니다. 2. 일반적인 PHP 디자인 패턴(단일 케이스 모드, 팩토리 패턴 등)에 능숙합니다. 3. TP 프레임워크 및 TP 프레임워크 사용에 능숙합니다. Laravel과 같은 주류 프레임워크를 이해합니다. 4. Linux, 개발 및 테스트 환경, 공통 서비스 구축에 능숙합니다. 5. 반응형 레이아웃과 Flex+Rem 유연한 레이아웃을 위한 HTML5/CSS3 및 BootStrap 사용에 능숙합니다. 백엔드 상호 작용, 도메인 간...

啦啦啦啦啦 2022-07-20 16:22:34 0  0  1001

단일 그리드 또는 Flex를 사용하여 다양한 카드 레이아웃 만들기: 실용적인 가이드

그림과 같은 반응형 카드 레이아웃을 만들려고 합니다. 제가 현재 하고 있는 일은 컴퓨터, 태블릿, 모바일 기기용으로 별도의 레이아웃을 만드는 것입니다. 그런 다음 미디어 쿼리를 사용하여 다른 두 보기의 표시 속성을 display:none으로 설정했습니다. 예: 컴퓨터 보기에 있는 경우 컴퓨터의 카드 레이아웃에는 디스플레이가 "없음"으로 설정되지 않지만 다른 두 컴퓨터의 디스플레이는 없음으로 설정됩니다. 이는 효과가 있지만 중복이 많이 발생합니다. Flex 또는 Grid를 사용하여 세 가지 레이아웃을 모두 구현하는 ...

P粉808697471 2024-04-02 21:07:36 0  2  465