기존의 html 코드를 미디어쿼리를 사용 스마트폰에서만 다르게 적용하려고합니다.

예를들어, PC용 사이트로고이미지랑, 스마트용 로고이미지를 다르게 적용시키려고 하는데

 

@media all and (max-width:480px){

#logo{visibility:hidden}

#logo:before{

visibility:visible;

content'<img src="logo.png">';

}

}

 

이런식으로 하니 날코드가 그냥 노출이 됩니다.

이런경우 img 태그가 먹히게 하려면 어떻게 해야할까요?

css 로는 아예 안되는걸까요?

 

  • ? Lv7

    content: url( "경로/이미지.png" );

    이미지라면 이거..

  • ? Lv7 Lv6
    감사합니다.
    그럼 이 이미지의 사이즈를 주려면 어떻게 해야할까요?
  • Lv15
    content 안에서는 태그는 안돼요. 저건 css지 html이 아니에요.
  • Lv6
    transform:scale(.3);
    이런식으로 해결하는수 밖에 없나봅니다.