반응이있는 HTML과 미디어 쿼리를 사용하는 CSS

-1

이전 질문에서 비슷한 질문을했지만 부트 스트랩 프레임 워크를 사용하고있었습니다. 내가 그리드 시스템을 좋아하지 않기 때문에 부트 스트랩을 사용하지 않고 반응 형 페이지를 만들 수 있기를 원합니다.반응이있는 HTML과 미디어 쿼리를 사용하는 CSS

나는 두 개의 div가 수평 및 수직 가운데에 있습니다. 반응이 좋고 창을 최소화 할 때 서로 겹쳐서 사용하고 싶습니다. CodePen에 내 code입니다. 나는 몇 번 시도했고 나는 여전히 접근하지 않도록하는 방법 : 당신이 div 태그와 콘텐츠를 분리하고 있기 때문에 스택 아니에요

@media only screen and (max-width: 768px){ 
    #about #aboutInfo{ 
    border: solid; 

    float:none; 
    text-align: center; 
    width: 100%; 
    } 
    #about #aboutInfo{ 
    float: none; 
    width: 100%; 
    } 
}

출처

2017-10-13 dollaza

전 이전 게시물에서 문제를 해결했지만 확인했습니다. 우선, float는 history이고 float : none;은 float를 사용하지 않는 것이 좋습니다. 기본적으로 요소가 코드 in에 쓰여진 것처럼 부동하지 않기 때문에 아무 것도하지 않습니다. 둘째로 Flexbox와 반응성 웹 디자인/개발에있어 실제로 빛을 발하게 될 가능성에 대해 자세히 살펴볼 것을 권합니다.

#about { 
    flex-direction: column; 
}

그리고 또한 몇 가지 기본적인 CSS 브라우저 다시 사용하는 것이 좋다 전에 말했듯 :

* {margin:0;padding:0;box-sizing:border-box} 
html, body {width: 100%}

을

그래서 다시, 미디어 쿼리에 아래 코드를 추가하여 문제를 해결

출처

2017-10-13 17:37:18 VXp

이유입니다. 섹션을 열로 만들고 다음과 같이 스타일을 지정하십시오. https://www.w3schools.com/css/css_rwd_mediaqueries.asp

부트 스트랩에서 div 태그처럼 작동하는 행 태그가 있습니다. 그러나 각각의 열은 문자 그대로 "col - **"형식으로되어 있습니다. 내가 바로 당신을 이해한다면

출처

2017-10-13 17:22:40 Harley

감사! 따라서 div를 사용하여 반응이 빠른 HTML을 얻을 수있는 방법은 없습니다. – dollaza

분명히 @ ivan.posokhin이 쓴 내용. 고마워, 이반! 나는 그 사실을 모르고 있었다 :) – Harley

, 당신은 추가해야

flex-flow: row wrap;

또는 # 정보에

flex-wrap: wrap;

출처

2017-10-13 17:33:19

반응이있는 HTML과 미디어 쿼리를 사용하는 CSS

답변

관련 문제