Webレコード1

1、携帯電話、pc端のウェブページの適応:cssの中でスクリーンの大きさによってそれぞれ対応する端のcssスタイルをロードします.これは、デバイスのオペレーティングシステムをチェックすることによっても可能です.

<style type="text/css"> 
@media(max-width:760px)   /*        760    css，                    */
{
     /*        */
    body {width:100%;} 
    /*               90% */
    #divMain img{max-width:90%} 

    /*     、  、  、   */
    #divHead{display:none}
}
</style>

2.code sample

      ：
<script type="text/template" class="navItemList1" >
</script>
{% end %}

{% block scripts %}
<script>
$('.addItem').click(function(){
    var hiddenContent=$('.navItemList1');
    $(".navBar").append($(hiddenContent.html()).clone());
})
</script>
{% end %}




<a href="{{ reverse_url('pay.book_edit', goods.id) }}" class="edit_game" title="  ">
<a href="{ url_concat(reverse_url('sp_goods.booking.edit'), {'sp_goods_id': booking.sp_goods_id,
'sp_shop_id': booking.shop_id }) }}"
   class="edit_game" title="  ">
    <span class="fa fa-pencil crud-action"></span>
</a>




//     
    $('.control').on('click','.fa-save',function(){
        //    。
        var $group_price=$(this).parent().parent().prev();
        var $pre_price=$group_price.prev();
        var $project_name=$group_price.prev().prev();
        var book_id=$(this).parent().find('input[name=book_id]').val();

        if ( !groupPrice || !prePrice  || ! projectName ){
            alert('       ');
            return false;
        }
        $.post(
            '{{ reverse_url("pay.book_item_edit") }}' ,
            {
                'name': projectName
            },
            function(data){
                if (! data.ok){
                    alert(data.error);
                }
                else{
                    var cate_html = '<input type="hidden" name="cate-id" value="' + data.cate_id + '">'
                    $group_price.children().remove();
                    $group_price.text(groupPrice);
                    $this.removeClass('fa-save').addClass('fa-pencil');
                    $this.parent().append(cate_html);
                }
            }
        )
    })

続きを待つ
参照先:
 [1]:http://www.webkaka.com/blog/archives/how-to-modify-a-web-page-to-be-responsive.html