테스트 사이트 - 개발 중인 베타 버전입니다

[질문글 죄송] 폰트 크기가 다르게 출력되는 현상에 관하여

· 10년 전 · 737 · 6

보시는 바와 같이 같은 페이지를 표시하는데 폰트의 크기가 다르게 나오는군요...

 

혹시나 같은 현상을 겪어 보신 분이나 고민중이신 분

 

해결하기 위한 방법이 뭐가 있을까요 ㅠ

 

 

왼쪽 이미지는 모바일 크롬에서 확인한 것이고요

오른쪽 이미지는 web2APP이라는 어플로 본 것입니다.

 

http://designhuh.phps.kr/study1015

에서 css 확인하실 수 있고요,

혹시나 해서 css를 남겨 놓습니다.(근본 없는 코딩이라 이해를 부탁드립니다. ㅠㅠ)

[code]

@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);

body{margin:0; padding:0; overflow-x:hidden; font-size:16px; font-family:'Noto Sans KR'sans-serif; font-weight:300; color:#666;}

h1, h2,h3, h4 {font-weight:bold; margin:0; padding:0;}

h1{font-size:3em;}

h2{font-size:2.5em;}

h3{font-size:2em;}

h4{font-size:1.5em;}

img{border:0; width:100%;}

.world{width:100%;}

.topbar{position:relative; width:100%; text-align:center; background-color:#C2185B; color:#fff; font-size:3em; font-weight:bold; text-transform:uppercase; padding:0.5em 0;}

.topbar i {margin:0; padding:0; position:absolute; top:50%; margin-top:-0.7em; left:0.5em; font-size:1em; background-color:#F06292; border-radius:10px; padding:10px 15px; cursor:pointer;}

.mainImg{position:relative; width:100%;}

.mainImg #mainimage{width:100%;}

.mainImg #maintext {position:absolute; top:50%; margin-top:-2.5em; width:100%; font-size:5em; text-align:center; color:#fff; font-weight:bold; text-shadow:2px 3px 5px black;}

.content{width:94%; padding:3%; text-align:justify;}

.row {width:100%; display:-webkit-flex; -webkit-flex-direction:row; -webkit-justify-content:space-between; margin-top:2em;}

.row #imagebox{width:49%;}

[/code]

 

 

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 6개

em --> px
상속과 절대 차이입니다.
답변 감사합니다.
body에 16px로 폰트 크기를 정해놓았는데요,
같은 1em이어도 웹뷰로 보면 폰트 크기가 확 작아지는 것 때문에 고민하고 있습니다.
결론 : 상위 부모로부터의 상속입니다.
바로 상위나 그 위의 부모의 값이 100 이면
부모의 값에 맞춰서 조절되는게 em 입니다.

폰트 크기는 기기별로 pixel 차이가 있를지 모르나 웹뷰와는 무관하며
em --> px 위의 뎃글 그대로입니다.

원하시는 부분을 px 로 바꾸시는데
모바일의 width 가 있으므로 em 을 추천 드리고
media 로 조절하는 방법이 최적인것으로 알고 있습니다.

http://www.clearboth.org/28_inheritance_and_cascade/
감사합니다. ^^ 공부 열심히 하겠습니다 ㅎㅎㅎ!!!
좋은 정보 얻어 갑니다. ^^
http://webdesign.tutsplus.com/ko/articles/7-css-units-you-might-not-know-about--cms-22573
다른 분께서 이 링크를 남겨 주셨네요 ㅎㅎ
혹시나 같은 고민을 하시는 분을 위해 남겨놓습니다.

게시글 목록

번호 제목
9040
3482
3472
3458
3453
3439
3434
디자이너 안녕하세요 4
3427
3423
디자이너 반갑습니다 3
3414
3409
3402
3396
3386
3381
3374
3365
3359
3357
11216
3353
3346
3345
디자이너 멋지네요~
3340
3333
6982
6983
3303
10134
10129
10127
10126
3299
3297
10123
회원통합스킨 조직도 2
6978
10120
10119
10115
3293
3292
10098
10050
10044
10041
10040
10032
3290
10029
게시판 모자~~ 2
10019
10009
6975
10007
게시판 조직도 1
10004
10000
9995
3288
3281
3279
3275
3274
9989
9986
3273
3272
9978
9975
9966
9965
게시판 메뉴
9960
9956
3268
9955
최신글 홈페이지
3264
9954
외부로그인 상단 로그인바
3260
9952
외부로그인 외부로그인 1
6972
3252
9944
9941
9932
9929
3246
9924
게시판 시안 4
9918
게시판 시안 5
9912
게시판 시안 5
9906
3240
3231
6967
3230
3226
3218
3216
9898
9894
9886
9872
9871