이전
목록
다음
허

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

허정권
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 · 2015-10-19 (월) 13:42:22 · 1289 · 6

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

 

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

 

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

 

 

cde9ce11999862ea5b2d70760e17fb2e_1445229382_2219.png cde9ce11999862ea5b2d70760e17fb2e_1445229382_4599.png

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

오른쪽 이미지는 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개

탈퇴회원
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2015-10-19 (월) 14:24:49
em --> px
상속과 절대 차이입니다.
허정권
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2015-10-19 (월) 14:40:03
답변 감사합니다.
body에 16px로 폰트 크기를 정해놓았는데요,
같은 1em이어도 웹뷰로 보면 폰트 크기가 확 작아지는 것 때문에 고민하고 있습니다.
탈퇴회원
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2015-10-19 (월) 14:51:27
결론 : 상위 부모로부터의 상속입니다.
바로 상위나 그 위의 부모의 값이 100 이면
부모의 값에 맞춰서 조절되는게 em 입니다.

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

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

http://www.clearboth.org/28_inheritance_and_cascade/
허정권
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2015-10-19 (월) 15:05:22
감사합니다. ^^ 공부 열심히 하겠습니다 ㅎㅎㅎ!!!
half
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2015-10-21 (수) 09:02:17
좋은 정보 얻어 갑니다. ^^
허정권
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2015-10-21 (수) 10:18:47
http://webdesign.tutsplus.com/ko/articles/7-css-units-you-might-not-know-about--cms-22573
다른 분께서 이 링크를 남겨 주셨네요 ㅎㅎ
혹시나 같은 고민을 하시는 분을 위해 남겨놓습니다.
댓글을 작성하시려면 로그인이 필요합니다.

디자인

1,855건
태그 필터 (최대 3개) 전체 디자이너톡 포토샵 플래시 기타 일러스트 디자이너팁 폰트문의 저작권상담 디자인시안 외부로그인 게시판 최근게시물 회원가입 회원통합스킨 갤러리 일반 스크랩 로그인 전체검색 달력 폼메일 최신글 접속자 설문조사 쪽지 패스워드찾기 우편번호 디자인 레이아웃 추천사이트
+
제목 글쓴이 날짜 조회
15-10-23 조회 1,821
15-10-23 조회 1,282
15-10-23 조회 1,476
15-10-22 조회 1,347
15-10-22 조회 1,254
15-10-22 조회 1,664
15-10-19 조회 1,111
15-10-19 조회 1,290
15-10-13 조회 1,609
15-10-11 조회 1,555
15-10-09 조회 1,947
15-10-06 조회 1,320
15-09-23 조회 5,238
15-09-23 조회 4,082
15-09-23 조회 3,592
15-09-23 조회 3,354
15-09-16 조회 2,238
15-09-16 조회 1,557
15-09-15 조회 2,051
15-09-15 조회 1,494
15-09-15 조회 1,359
15-09-14 조회 1,849
15-09-10 조회 2,018
15-09-09 조회 1,927
15-09-09 조회 1,533
15-09-02 조회 2,039
15-08-28 조회 2,783
15-08-20 조회 1,725
15-08-18 조회 2,375
15-08-17 조회 2,405
15-08-17 조회 2,326
15-08-13 조회 1,858
15-08-12 조회 1,310
15-08-12 조회 1,904
15-08-12 조회 1,689
15-08-03 조회 2,623
15-08-03 조회 1,870
15-07-31 조회 1,807
15-07-30 조회 1,644
15-07-26 조회 1,513
15-07-23 조회 1,105
15-07-22 조회 1,847
15-07-15 조회 1,589
15-07-14 조회 1,898
15-07-13 조회 1,105
15-07-13 조회 1,276
15-07-12 조회 966
15-07-12 조회 1,944
15-07-07 조회 2,060
15-07-06 조회 1,699
15-07-05 조회 1,517
15-07-03 조회 1,124
15-07-02 조회 3,206
15-07-01 조회 1,212
15-06-29 조회 1,295
15-06-25 조회 3,113
15-06-25 조회 3,099
15-06-22 조회 2,908
15-06-22 조회 1,491
15-06-16 조회 2,149
15-06-15 조회 1,543
15-06-12 조회 1,325
15-06-02 조회 1,802
15-05-29 조회 2,169
15-05-29 조회 1,590
15-05-22 조회 3,093
15-05-21 조회 3,146
15-05-18 조회 3,254
15-05-18 조회 3,211
15-05-06 조회 3,234
15-05-05 조회 2,351
15-05-02 조회 2,393
15-05-01 조회 1,851
15-04-30 조회 3,011
15-04-28 조회 3,300
15-04-24 조회 2,044
15-04-23 조회 1,420
15-04-17 조회 1,961
15-04-06 조회 1,804
15-03-31 조회 3,109
15-03-27 조회 2,065
15-03-26 조회 1,723
15-03-25 조회 3,480
15-03-19 조회 1,492
15-03-18 조회 1,832
15-03-18 조회 4,213
15-03-18 조회 1,314
15-03-16 조회 2,062
15-03-16 조회 2,013
15-03-07 조회 1,798
15-03-01 조회 1,614
15-02-25 조회 1,932
15-02-13 조회 3,186
15-02-11 조회 1,459
15-02-10 조회 2,201
15-02-10 조회 1,519
15-02-09 조회 1,568
15-02-08 조회 2,210
15-02-04 조회 3,198
15-02-03 조회 3,764
글쓰기