WordPress를 반응형으로 만드는 방법

爱喝马黛茶的安东尼
풀어 주다: 2019-07-25 13:24:00
원래의
3297명이 탐색했습니다.

WordPress를 반응형으로 만드는 방법

WordPress 반응형 테마/템플릿을 만드는 방법은 무엇입니까?

이 시대에 WordPress를 사용하여 웹 사이트를 구축하지 않은 사람들은 감히 웹 사이트를 구축했다고 말할 수 없습니다. 워드프레스란 무엇인가요? WordPress는 WP라고도 하는 세계에서 가장 유명한 웹사이트 콘텐츠 관리 시스템(또는 블로그/블로그 시스템)입니다. 관련 조사에 따르면 WordPress의 글로벌 시장 점유율은 2015년에 48%에 달했으며 계속해서 글로벌 오픈 소스 웹 웹 사이트 시스템 챔피언의 자리를 지키고 있습니다. 그리고 지금도 급속히 성장하고 있는데... 국내 오픈소스 CMS를 보면 제대로 살아남아 최신을 유지하고 있는 것은 소수에 불과하다. 한때 강력했던 Dongyi, dedecms, phpcms, Empirecms, phpwind, discuz 등이 여전히 살아남을 수 있을까요?

도구/재료

HTML5

CSS3

Chrome, Firefox, Edge 등과 같은 최신 브라우저

관련 권장 사항: "WordPress Tutorial"

방법/단계

1 . 단순 즉, 웹 페이지 헤드(

) 사이에 다음 쿼리 코드를 추가합니다.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
로그인 후 복사

2 그런 다음 다음과 같은 미디어 쿼리 요소를 CSS 파일에 추가합니다.

@media screen and (max-width:480px) {
//当浏览器屏幕小于480px时,此代码块生效
}
@media screen and (min-width:481px) and (max-width:720px) {
//当浏览器屏幕大于480px小于720px时,此代码块生效
}
@media screen and (min-width:721px) and (max-width:1079px) {
//当浏览器屏幕大于721px小于1079px时,此代码块生效
}
로그인 후 복사
범위는 실제 상황에 따라 직접 수정할 수 있습니다. 자, 이것이 반응형과 비반응형의 차이입니다. html+css만 알면 곧 마스터할 수 있을 거라 믿습니다.

3. 핵심 사항을 이해한 후에는 반응형 정적 페이지 만들기를 시작할 수 있습니다. 그런 다음 WordPress 관련 기능 및 루프에 정적 페이지를 추가하면 됩니다. HTML 정적 페이지를 생성한 후 "워드프레스 테마 개발 및 제작 공통 기능: openue.com/post/597"을 참고하여 템플릿을 제작하시면 됩니다.

Notes

디자인 과정에서 CSS의 너비와 높이를 고정하는 것을 피하고, 대신 백분율을 사용하고, 글꼴은 px 대신 rem을 사용하세요.

위 내용은 WordPress를 반응형으로 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿