Chrome 콘솔의 CSS 편집 도구

-1

내 콘솔을 열고, 콘솔의 왼쪽 상단에있는 토글 장치로 이동 한 다음 페이지 중간에 선택할 수있는 옵션이 있습니다 (iphone/galaxys). 화면에 딱 맞을 지 모르지만 컴퓨터 장치 15 인치와 13 인치 용으로 물건을 개발하고 싶습니다. 17 인치 장치를 사용하고 있습니다. 어떻게 구현합니까?Chrome 콘솔의 CSS 편집 도구

출처

2017-12-23 turmuka

누가 downvoted 적어도 당신에게 대답을 제공 할 수 있습니까? – turmuka

특정 '크기'의 장치에 대해 개발중인 아이디어는 반응 형 디자인으로 시작할 때 자주 범하는 실수입니다. 실제 크기 대신에 실제로 개발중인 것은 해결 방법입니다. 당신이 설계하고 싶다면, 그래서

당신이 드롭 다운 메뉴에서 아이폰이나 갤럭시 옵션을 선택하면 당신이 알 수 있습니다 높이와 너비 입력을 미리 채 웁니다 13 "또는 15"장치의 경우 실제로 알고 자하는 것은 장치의 해상도입니다. 예를 들어, 현재 13.3 인치 Macbook Pro는 2560 x 1600 픽셀의 해상도를 가지고 있으며, QHD 디스플레이가 장착 된 Dell XPS 13 "의 해상도는 3200 x 1800 픽셀입니다.

표준 13 "~ 15"크기로 설계하려면이 옵션을 Responsive으로 설정 한 다음 해상도를 2560 x 1600으로 설정하거나 해당 야구장에서 설정하십시오.

또한, Responsive 모드에서, 당신은 단순히 창 크기를 조정하기 위해 오른쪽과 하단면을 드래그 할 수 있습니다. 이렇게하면 귀하의 사이트가 다양한 해상도에서 실제로 어떻게 나타나는지 확인할 수 있습니다.

추신 : 내가 downvote하지 않았다

출처

2017-12-23 17:16:31

잠깐 혼란 스럽네요, 어떻게 이것을 CSS에서 구현합니까? 모든 데스크탑은 어쨌든 동일한보기를 가질 것입니까? 그 모든 작업에서 구할 수있는 몇 줄의 코드가 있습니까? 각각에 대해 픽셀을 설정합니까? – turmuka

그 대답은이 질문의 범위를 벗어납니다. 한 가지 방법은 해상도가 640 픽셀보다 작은 모든 장치와 같이 해상도 범위를 지정하는 것입니다. 그런 다음 모든 장치 641 ~ X1, X1 +1 ~ X2 등, 마지막으로 XN보다 큰 모든 해상도 타겟팅은 CSS의 미디어 쿼리를 사용하여 수행됩니다. –

Chrome 콘솔의 CSS 편집 도구

답변

관련 문제