패딩 응답 속도 향상

방금 부트 스트랩을 사용하기 시작했으며 일반적으로 프론트 엔드 개발에 익숙합니다. 패딩에 문제가 있습니다. 데스크톱 및 모바일 장치의 크기가 동일하기 때문입니다.패딩 응답 속도 향상

HTML 코드 :

<div class="container" id="i-container"> 
     <h3>We possess high quality products &mdash; therefore our customers are always loyal</h3> 
    </div>

CSS 코드 :

#i-container{ 
     border: solid; 
     border-color: rosybrown; 
     padding-left: 150px 
     padding-top: 10px; 
    }

내가 위에서 언급 한 바와 같이이 모바일 기기에 패딩이 (가 응답 될 것 같지 않습니다) 동일합니다. 나는 em도 사용했다. 도움이되지 않습니다.

출처

2016-09-04 Anon Ymous

픽셀을 크기로 사용하면 항상 같은 크기가됩니다. 값을 변경하려면 %, vw 또는 mediaqueries를 사용할 수 있습니다. –

웹 사이트를 반응 적으로 만드는 동안 측정 단위로 백분율을 사용하십시오. 픽셀을 반응 적으로 사용하려면 픽셀이 작동하지 않습니다. 백분율을 사용하면 화면 크기에 대한 측정이 수행됩니다. 그러나 픽셀을 사용하는 경우 패딩은 모든 크기에서 동일하게 유지됩니다. 다음과 같이 CSS를 변경하십시오.

#i-container{ 
     border: solid; 
     border-color: rosybrown; 
     padding-left: 12%; 
     padding-top: 0.5%; 
    }

원하는 백분율을 사용하십시오.

출처

2016-09-04 20:33:19

우리는 당신이 원하는 것을 당신이 찾고 있고, 당신이 찾고있는 결과가 무엇인지 알지 못하기 때문에 어떤 특정한 것을 쓰는 것이 꽤 어렵습니다.

이렇게 말하면 픽셀은 사이트를 여는 장치와 상관없이 픽셀입니다. 따라서 요소에 고정 된 크기를 설정하면 요소가 보이는 영역 외부로 나오게됩니다. 그게 아마도 당신이 겪고있는 일일 것입니다. 패딩을 픽셀로 설정하면 어떤 장치가 사이트를 여는 데 사용 되던지간에 정확히 패딩을 유지합니다.

하지만 장비 독립적 인 꽤 좋은 그리드 시스템을 가진 부트 스트랩에 대해 언급합니다. 미디어 쿼리를 사용하여 장치 및 레이아웃을 계속 제어합니다. 특히 .col-xs- (768px 미만), .col-sm- (768px 이상), .col-md- (992px 이상), .col-lg- (1170px 이상)을 사용하고 있습니다. 즉, 컨텐츠를 그룹 및 행에 배치 할 수 있으며, 그룹 및 행에서 컨텐츠를 렌더링하고 다른 화면 크기에 배치하는 방법을 완벽하게 제어 할 수 있습니다.

프로젝트의 경우 레이아웃 및 배치를보다 잘 제어하기 위해 그리드 시스템 HERE을 살펴 보는 것이 좋습니다.

출처

2016-09-04 20:26:51 chrisv

패딩 응답 속도 향상

답변

관련 문제