Как сделать ссылку, отображаемую как обычная ссылка в одном размере экрана, как кнопка в другом?

Question

Я программирую веб-сайт с тремя различными размерами для настольных компьютеров, нетбуков и мобильных телефонов.

На главной странице у меня есть клика через HTML ссылка разнообразия в

<a href="more.html">Find out more</a> 

.

Что я хочу - это изменить это на кнопку для мобильных экранов, например условное утверждение или что-то в этом роде.

Любые идеи?

Thanks

Answer 1

Вы должны использовать медиа-запросы в CSS. См.: http://www.htmlgoodies.com/beyond/css/introduction-to-css-media-queries.html

Просто измените CSS для разных размеров экрана.

Answer 2

Официальный сайт о медиа-запросах. click here

Answer 3

примеры:

@media only screen and (max-device-width: 480px) { 
/* define mobile specific styles come here */ 
a {display:block; width:200px; height:50px;} /* here you add style to your link/class ..*/ 
} 

или .. если вы хотите использовать, то вы можете скрыть это от CSS для настольной версии и показать только для мобильных

/*desktop css*/ 
a { ... css code ...} 
button {display:none} 

@media only screen and (max-device-width: 480px) { 
/* define mobile specific styles come here */ 
a {display:none} /* 
button {display:block; ..} 
} 

и JQuery раствор:

jQuery(document).ready(function($) { 

    var $is_mobile = false; 

    if($('#some-element').css('display') == 'none') { 
     $is_mobile = true;  
    } 

    // now i can use $is_mobile to run javascript conditionally 
}); 

Для опытного пользователя используйте класс вместо элементов html

Answer 4

Использовать медиа-запросы. Они могут помочь вам настроить тип экрана и основываться на его ширине. Например

@media only screen and (min-device-width: 300px) and (max-device-width: 480px) { 

    /* Now you can write a different style of elements on a screen with maximum 300px as width */ 

    a { 
     color: #f00; /* Make link appear red on mobile screen */ 

     /* make it should like a button */ 
     border: 1px #c00 solid; 
     background: #ddd; 
    } 
} 

Примечание: медиазапросы являются особенности CSS3, и не будет работать в более ранних версиях IE.