화면 크기에 따라 HTML 페이지와 CSS 파일을 연결하는 적절한 코드입니까?

Question

화면 크기에 따라 CSS 파일을 분리하기 위해 HTML 페이지를 링크하고 싶습니다. 계속 진행하고 페이지와 스타일을 만들기 전에이 코드가 의미가 있습니까? 내가 링크에서 미디어 쿼리를 넣어 때문에 또한

<link href="css/reset.css" rel="stylesheet" type="text/css" /> 
<link href="css/styles1.css" rel="stylesheet" type="text/css" media='screen and (min-width: 768px)' /> 
<link href="css/styles2.css" rel="stylesheet" type="text/css" media='screen and (min-width: 992px)' /> 
<link href="css/styles3.css" rel="stylesheet" type="text/css" media='screen and (min-width: 1200px)' /> 

, 또한 각 CSS 파일에서 적절한 미디어 쿼리를 넣어해야합니까? 어떤 도움을 주셔서 감사합니다, 감사합니다.

<link rel="stylesheet" href="css/style.css"> 

그리고 그 스타일 시트 내의 특정 화면 크기를 사용 Media Queries을 대상으로 :

Answer 1

하나의 스타일 시트를 사용해보십시오. 예를 들어 :

@media screen and (max-width: 767px) { /*styles*/ } 

Answer 2

당신은 조건부로드 스타일 시트, 또는 스타일 시트 자체에 미디어 쿼리를 사용할 수 있습니다.

<!-- CSS media query on a link element --> 
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> 

<!-- CSS media query within a stylesheet --> 
<style> 
@media (max-width: 600px) { 
    .facet_sidebar { 
    display: none; 
    } 
} 
</style> 

참조 : https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Answer 3

이이의

더 많은 수 있습니다 여기에 하나를 요청하기 전에 CSS 트릭

https://css-tricks.com/resolution-specific-stylesheets/