프론트엔드-코드/CSS

2023. 09. 05일자 화면 너비 점유율

sdafdq 2023. 9. 5. 12:46

https://gs.statcounter.com/screen-resolution-stats/desktop/worldwide

 

Desktop Screen Resolution Stats Worldwide | Statcounter Global Stats

This graph shows the stats of desktop screen resolutions worldwide based on over 5 billion monthly page views.

gs.statcounter.com

 

pc 크기

2023.09.05 현재 

1920~ 1280 는 pc는 다 품음.

 

그러니까 inner를 1280 이하로 잡는 게 좋음.

 

 

 

https://gs.statcounter.com/screen-resolution-stats/mobile/worldwide

 

Mobile Screen Resolution Stats Worldwide | Statcounter Global Stats

This graph shows the stats of mobile screen resolutions worldwide based on over 5 billion monthly page views.

gs.statcounter.com

 

모바일 크기

 

얘네는 작고 또 모바일은 크기도 더 다양하니 사실 그냥 flex로 비율 하는 게 좋을 듯

 

가로, 세로 그거는 생각해야 할 듯.

모바일은 415이하면 다 품을 듯.

 

 

 

 

 

https://www.thewordcracker.com/miscellaneous/pc-%ED%83%9C%EB%B8%94%EB%A6%BF-%EB%AA%A8%EB%B0%94%EC%9D%BC%EC%9A%A9-css-%EB%AF%B8%EB%94%94%EC%96%B4-%EC%BF%BC%EB%A6%ACmedia-query/

 

PC, 태블릿, 모바일용 CSS 미디어 쿼리(Media Query)

기기 해상도에 따라 CSS를 달리 지정해야 할 경우 미디어 쿼리(Media Query)를 사용할 수 있습니다. 다음은 github에 올라온 데스크탑(PC), 태블릿, 모바일용으로 사용할 수 있는 CSS 미디어 쿼리입니다.

www.thewordcracker.com

 

 

'프론트엔드-코드 > CSS' 카테고리의 다른 글

... 말줄임  (0) 2023.09.06
카드 디자인  (0) 2023.09.06
가로모드, 세로모드  (0) 2023.09.05
min-width, max-width  (0) 2023.09.05
-webkit- 접두어 자동으로 붙여주는. autoprefix  (0) 2023.09.01