Boostrap 3에 대한 "normal"CSS

나는 반응이 빠른 세계에 처음이고 부트 스트랩을 사용하는 템플릿을 사용하고 있습니다.Boostrap 3에 대한 "normal"CSS

나는 반응 형으로 만들고 싶지만 다음과 같은 CSS를 사용하는 것이 가장 좋습니다.

내가 수정 한 theme

I 페이지의 상단에 Onesie 제목을 이동 걸려 다음 - 나는 주제의 왼쪽에있는 틈에서 #siteTitleBox

에 그 코드를 이동 한을 #text이라는 새 div를 만들었습니다. 임의의 게시물 등의 데이터를 표시합니다.

정확한 위치를 갖고 있지만 지금은 반응 형 코드로 개발하는 데 도움이 필요합니다.

CSS :

#siteTitleBox 
{ 
margin: -580px 0 0 0; 
height:150px !important; 
} 
#text{ 
margin:-568px 0 0 -135px; 
width:530px; 
height: 100% !important; 
border:1px solid transparent; 
color: #ffffff; 
background-color: rgba(0, 0, 0, .4); 
border-color: rgba(255, 255, 255, .9); 
} 
#text p{ 
margin: -65px 5px 0 5px; 
} 
#text h3{ 
margin:0 0 0 5px; 
} 
#siteTitleBox h1 a:hover{ 
color:#fff; 
}

HTML : % size.use 유 responsive.don't 사용 픽셀 기본 폭 최선의 방법을 사용하려는 경우

<div id="siteTitleBox">Page Title</div> 
<div id="text"><p>ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC </p>

출처

2014-09-05 Jess McKenzie

CSS 나 HTML의 다양한 미디어 쿼리를 사용, 그 거대한 부정적인 여백을 제거하고 중요한 수정 자. 그런 다음 너비 기반 미디어 쿼리를 추가하십시오. 보다 구체적인 조언이 필요하면 html을 보여줘야합니다. – recursive

나는 질문이 무엇인지를 기반으로 이해하고 있지 않다. – Devin

@Fabio 나는 질문을 변경하는 과정에 있었고 지금은 그렇게했다. –

을 기반

width:50%

아직 사용 하시겠습니까? 픽셀 기반 선언 후 처음에는

같은 CSS를

@media screen and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait){ 
#text{ 
width:30px;} 
}` 
@media screen and (device-width: 450px) and (device-height: 100px) and (orientation:portrait){ 
#text{ 
width:320px;} 
}`

HTML

<link rel="stylesheet" media="(max-width: 450px)" href="phone.css" /> 
<link rel="stylesheet" media="(max-width: 760px)" href="tablet.css" />

출처

2014-09-05 03:18:23 yugi

Boostrap 3에 대한 "normal"CSS

답변

관련 문제