모바일 장치의 사용이 증가함에 따라 Google은 2015년 XNUMX월 말부터 페이지가 모바일에 적합하지 않은 웹사이트에 불이익을 가했습니다. 결과는 귀하의 SEO, 귀하의 웹사이트가 크고 작은 화면 모두에서 적절하게 표시되는지 확인해야 합니다.
이 기사에서는 규칙을 사용하여 웹 사이트를 페이지에 배치하는 방법을 보여 드리겠습니다. @media CSS3의.
"반응 형"과 "모바일 호환"이라는 용어는 실제 의미의 차이에도 불구하고 종종 같은 의미로 사용된다는 점에 유의해야합니다. 웹 사이트가 모든 화면 크기를 수용하는 데 필요한 기준을 충족하는지 확인하려면 각각의 의미를 이해하는 것이 중요합니다.
그러나 이전에 WordPress discover를 설치 한 적이 없다면 워드 프레스 블로그 7 단계를 설치하는 방법 et 어떻게 찾아 설치하고 블로그에 워드 프레스 테마를 활성화하려면
그런 다음 왜 우리가 여기 있는지 다시 돌아 갑시다.
응답 및 모바일 호환
그렇지 않은 웹 사이트 도 응답도 호환 모바일, 모든 화면에서 동일하게 표시됩니다. 즉, 대형 화면 용 버전이 모든 곳에 표시됩니다. 작은 화면에서는 모든 콘텐츠를 보려면 페이지를 가로로 스크롤해야합니다. 이러한 화면에서는 탐색하기가 어렵습니다.
또한 이것들을 발견하십시오 8 WordPress 플러그인을 사용하여 웹 사이트의 모양을 맞춤 설정
웹 사이트는 호환 모바일 모바일에서 볼 수있는 엄격한 최소 기준 만 충족 할 때 반응 형 웹 사이트가 아닙니다. 예를 들어 수평으로 탐색 할 필요가없는 웹 사이트는 모바일 호환으로 간주 될 수 있습니다. 이로 인해 요소가 작고 구별 할 수 없게됩니다. 그런 다음 내용을 읽으려면 확대해야합니다.
그들의 웹 사이트 반응 다양한 화면 크기에 완벽하게 적응합니다. 가장 작은 화면에서 쉽게보고 사용할 수 있도록 요소를 재정의합니다. 웹 사이트에 원하는 디자인 유형입니다.
우리도 참조하십시오. 10 WordPress 플러그인을 사용하여 웹 사이트에 예약 양식을 만드십시오.
반응 형과 호환 형 모바일의 차이점을 알게되었습니다. 우리는 이제 규칙을 볼 것입니다 @media 반응형 웹사이트를 업데이트하거나 아주 쉽게 만들 수 있는 CSS3 워드 프레스 테마 반응형 콘텐츠로
규칙 @media CSS3의
테마를 반응 형으로 만들려면 규칙이 필요합니다. @media CSS3의. 기본적으로 특정 유형 (크기)의 화면에 사용할 스타일을 정의 할 수 있습니다. 다른 CSS 규칙을 중첩한다는 점을 제외하면 다른 CSS 규칙 (중괄호 포함)처럼 사용합니다.
@ 미디어 미디어 유형 (표현식) {css-test-selector {property1 : value1; property2 : 값 2; }}
이 구조에서 규칙 내부의 요소 @ 미디어 만 작업 할 때 종류-의 미디어 감지되도록 지정되었습니다. 선택한 용지 종류에 따라 특성을 치수로 지정할 수 있습니다.
발견 WordPress에 인터페이스 및 사용자 경험을 적용하는 방법
규칙 @media 웹 사이트를 방문한 화면 유형을 감지하고이 유형의 화면에 가장 적합한 규칙을 선택합니다. 모든 주요 브라우저는 이미 규칙을 통합했습니다. @media.
정보 목록은 다음과 같습니다. 크롬 , Safari, 파이어 폭스, IE, Opera et Edge.
대상 화면 정의
수정하고 싶다면 워드 프레스 테마 필요한 경우 돌아갈 수 있도록 기존 CSS의 백업 복사본을 만드십시오.
에 대한 기사를 읽으십시오 점차 페이스 북과 Disqus 의견을로드하는 방법
구조에서 보았 듯이 화면 유형을 정의하려면 @media 타겟 화면의 유형입니다. 다음은 다양한 유형의 화면 목록입니다.
- 모든 : 모든 유형의 화면 또는에 지정된 치수 표현
- 화면 : 모바일, 태블릿, 노트북 또는 데스크톱 등 모든 화면에서 사용 가능
- 인쇄 : 프린터 용, 인쇄 할 수있는 페이지에 특정 스타일을 원하는 경우
- 연설 : 시각 장애인을위한 스타일을 원하는 경우 화면 판독기 용.
화면 유형 앞에 놓을 수있는 연산자도 있습니다. 같이 지원 지정된 유형과 다른 유형의 화면에 대한 스타일을 표시하거나 만 지정된 화면에만 스타일을 적용합니다. 따라서 다음을 가질 수 있습니다.
@media 만 화면
화면 크기에 대한 스타일 정의
당신은 사용할 수 있습니다 표현 화면의 특성에 대한 세부 정보를 제공합니다. 후 @media 입력 과 그 뒤에 표현식이 있습니다. 두 개 이상의 표현식을 사용하는 경우 모두 과. 다음은 구조의 예입니다.
@ 미디어 전용 화면 및 (최대 너비 : 640px) {selector-css-example {/ * 여기에 일반적인 CSS * /}}
이 예에서는 최대 폭 의 값 640px. iPhone 또는 소형 Android 스마트 폰 크기의 최대 화면 너비를 설정합니다. 이러한 종류의 구조를 사용하면 웹 사이트가 다른 장치에서 어떻게 보이는지 제어 할 수 있습니다. 다음은 사용할 수있는 차원과 관련된 속성 목록입니다. 표현 :
또한 우리의 발견 8 SEO 귀하의 웹 사이트의 SEO 최적화를위한 WordPress 플러그인
- m의 폭 et 최대 폭 : 규칙에 포함 된 스타일 표시에 필요한 최소 및 최대 너비 @media. 하나 이상의 픽셀과 스타일이 표시되지 않습니다.
- m의 높이 et 최대 높이 : 각각 규칙에 포함 된 스타일을 표시하는 데 필요한 최소 및 최대 높이 @media. 대부분의 화면은 페이지를 세로로 풀도록 설계되었으므로 속성 최소 높이 et 최대 높이 거의 사용되지 않습니다.
다음은 일부 터미널의 화면 크기 목록입니다.
- 아이폰 : 640px
-아이 패드 : 1024px
-태블릿 : 1366px
-Android 스마트 폰 : 640px, 720px, 854px, 960px
-Android 초대형 : 1024px, 1066px
-Windows 전화 : 480
-Windows phone 대형 : 768px
-남녀 노소 : 320px
-울트라 북 / 노트북 : 1366px
-데스크톱 및 TV : 1920px
사용할 수있는 다른 많은 속성이 있습니다. 표현. 예를 들어 16 : 9 종횡비 이미지를 표시 할 수있는 데스크톱 또는 TV 화면을 대상으로하는 경우 다음과 같은 구조를 사용할 수 있습니다.
@media only screen and (min-width : 1920px) and (device-aspect-ratio : 16/9) {selector-css-example {/ * Your common CSS here * /}}
더 자세한 목록과 예제는 w3schools et 모질라 개발자와.
웹 사이트의 반응 형 기능 테스트
수정하거나 구축할 때 워드 프레스 테마 또는 마지막에 놀라움을 좋아한다면 결과를 테스트하여 최종적으로 반응하는지 확인해야 합니다. Google은 반응하지 않는 웹사이트를 감시합니다.
이것들도보십시오 블로그에 탭을 만들 수있는 10 WordPress 플러그인
목표로 삼고있는 모든 모바일 장치를 갖추지 못한 경우 (다행히 당사 증권 거래소의 경우) 웹 사이트가 다양한 화면에 어떻게 적응하는지 확인할 수있는 많은 도구가 있습니다.
직접 컴퓨터의 브라우저에 당신은 사용할 수 있습니다 창 Resizer는 크롬 브라우저 확장, ResponsiveResize, ResizeMe ou Firesizer. 아래는 기본적으로 Firefox와 함께 제공되는 반응 형 디자인보기의 BlogPasCher 이미지입니다.
작업 전용 웹 사이트도 있습니다.
이 웹사이트는 화면 크기를 직접 선택할 수 있다는 특징이 있습니다. 이 웹사이트는 프레임에 귀하의 웹사이트를 로드한다는 점에 유의하세요. 그렇다면 당신의 워드 프레스 테마 프레임에 표시되지 않도록 설계되었으므로 여기에 표시되지 않을 가능성이 높습니다.
아이 패드 픽
https://blogpascher.com/wp-admin/post.php?post=60969&action=edit
이 웹 사이트는 최신 Apple, iPad 및 iPhone 장치에서 웹 사이트를 테스트하는 데 유용합니다. URL을 입력하십시오. responsivepx와 동일한 프레임 문제가 발생합니다.
이 웹 사이트에서는 작은 화면과 화면 오른쪽에서 선택한 이전 모델의 전화기에서 테스트 할 수 있습니다. 일부 화면 속성을 구성 할 수도 있습니다.
이것은 가장 중요한 테스트는 아니지만 가장 중요한 테스트 중 하나입니다. 바에 주소를 입력하고 분석 테스트를 시작합니다. 테스트 후 도구는 보고서와 점수를 표시합니다. 테스트 결과가 긍정적이면 Google에 의해 불이익을받지 않습니다.
개발자가 아닌 경우 조언합니다. 반응 형 WordPress 테마 목록 시작합니다.
추천 자료
또한 파트너와 구독자를 더 잘 유치하고 웹 사이트의 보안을 향상시키는 데 도움이되는 기타 권장 리소스를 찾아보십시오.
- 워드 프레스에 대한 사용자 정의 링크 과정을 만드는 방법
- 블로그에 고객 리뷰를 추가하는 5 WordPress 플러그인
- WooCommerce에서 쿠폰에 대한 행운을 만드는 방법
- 블로그에 가장 적합한 상품 및 쿠폰을 찾아보세요
결론
여기 ! 규칙을 사용하여 웹 사이트 또는 WordPress 테마를 반응 형으로 만드는 방법에 대해 알아야 할 모든 것을 알고 있습니다. @media CSS3의. 당신에게 사랑 스럽거나 선호하는 WordPress 테마를 놓친 경우 섹션에 링크를 남겨주세요 commentaires 아래.
그러나 귀하는 우리와 상담 할 수 있습니다. 능숙, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요하면 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.
우리는 또한 당신을 초대합니다 다른 소셜 네트워크에서 공유.
...
