CSS에 대한 브라우저 적합성

Question

저는 UI 개발 세계에 초보자입니다. 지금은 레이아웃을 개발하기 위해 HTML과 CSS를 사용하고 있습니다. 나는 (아주 좋은 브라우저이기 때문에) 내 크롬 코드를 디버깅하는 데 가장 좋은 브라우저이기 때문에 내 크롬 코드를 사용하지만, Firefox를 다운로드하여 내 디자인이 어떻게 보이는지를 보았다. (나는 거의 생각하고 있었다. 아무것도 변하지 않을 것입니다.) 내 디자인이 끔찍한 것처럼 보였고, 내가 겪은 모든 일이 파이어 폭스와 호환되지 않았을 때 비틀 거리기 만했을뿐입니다.

브라우저 간의 이러한 비 호환성 (일부 전문 기술)을 적절하게 인식하는 방법과 다른 사이트를 개발할 때 현재 설계 및 미래에 대해 지금해야 할 일을 알려주는 전문가가 필요합니다.

PS 내 질문에 실제 영어가 없을 수도 있지만 정중하게 묻는 것이 아니라 내 지역에서 소리가 나는 것입니다. 감사합니다

당신이 좋은 기반을 가지고 있는지 확인 & 당신이 가서 당신이 배워야 할 것이다

Answer 1

브라우저가 모두 다른 사람들에 의해 개발 되었기 때문에 항상 호환성 문제가 발생할 가능성이 있습니다.

1. 는 CSS의 reseter를 사용

   나는 그것이 문제의이 종류를 방지에 관해서 생각할 수있는 두 가지 단계가있다. 즉, 모든 항목을 동일한 시작 값으로 가져 오는 CSS 집합을 포함하는 스타일 시트입니다 (즉, 크롬은 목록 항목에 30px 패딩을 가지고 있지만 파이어 폭스는 35px이지만 CSS 리셋 터는 두 가지 모두에 30px 패딩이 있음을 알립니다. - 예를 들어). CSS 재설정에 대한 자세한 내용은 다음 질문을 참조하십시오. CSS reset - What exactly does it do?

2. CSS 앞에 올바르게 접두사를 붙이십시오. 브라우저는 속성을 다르게 구현하므로 -webkit-transition:0.2s; 크롬의 초기 버전에서 일한 파이어 폭스는 transition:0.2s이 허용되는 구문이어야한다는 표준이 될 때까지 -moz-transition:0.2s 구현 만했습니다. 모바일 대응에 대해서는 Autoprefixer처럼 그 도움을 줄 수 많은 툴, 또는 pleeease.io

가있어, 열쇠는 많은 고정 폭 요소 (예 : 주요 컨테이너가 1024px) 또는 media queries을 갖는 고정 적응을 사용하지 않도록하는 것입니다 미디어 쿼리를 사용하여 특정 디스플레이 크기로 크기를 조정합니다.
는 인터넷의 지식은 정말이에 대한 자세한 내용을 이해하는 데 도움이 수 있지만, 당신은 단지 그것을 밖으로 시도하려는 경우, 당신은이 SO 질문에 대한 몇 가지 인기있는 미디어 쿼리를 볼 수 있습니다 Media Queries: How to target desktop, tablet and mobile?

Answer 2

, 간단한 것들로 시작 업데이트되었습니다. 많은 고급 CSS3 애니메이션이 있습니다. 전환은 &이며, CSS3는 더 강력한 &이되었습니다. "Can I Use"을 확인하여 CSS를 지원하는 브라우저를 확인하십시오. 반응 형 디자인은 미디어 쿼리 (화면 크기 확인)를 기반으로합니다 (예 : 화면 크기 확인) & 대신에 백분율을 사용하여 장치에 따라 디자인이 변경 될 수 있습니다. 또한 MDN은 브라우저 호환성을 참고로하는 훌륭한 도구입니다.

Answer 3

질문의 두 번째 부분 :
쓰기
는 이에 따라 "1.0"부분을 수정 헤드 부분에 당신의 웹 사이트가 호환이 코드.

<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 

Answer 4

좋은 연습에 패딩 여백을 설정하는 것입니다 이

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    } 

과 같이 0과 스타일 시트의 첫 번째 줄에 박스 크기를 사용하여 재설정 브라우저 레이아웃이