<big id="n3dbt"><strong id="n3dbt"></strong></big>
      1. <small id="n3dbt"><delect id="n3dbt"></delect></small>

        <thead id="n3dbt"><ruby id="n3dbt"><rp id="n3dbt"></rp></ruby></thead>
        <th id="n3dbt"></th>
        <span id="n3dbt"></span><span id="n3dbt"></span><span id="n3dbt"></span><strike id="n3dbt"></strike>

        建站百科Website News

        當前位置:首頁 »HTML5 移動頁面自適應手機屏幕四類方法

        HTML5 移動頁面自適應手機屏幕四類方法

        至成科技 2018-07-03 訪問量(683) 評論(0)
        摘要:目前,人們使用手機的頻率越來越高,手機除了聊天,還能實現網站的瀏覽.那么對于手機瀏覽網站應該如何制作呢?現在的移動設備網站頁面基本是使用HTML5 移動頁面自適應系統.1、使用meta標簽:viewportH5移動端頁面自適應普遍使用的方法,理論上講使用這個標簽是可以適應所有尺寸的屏幕的,但是各設備對該標簽的解釋方式及支持程度不同造成了不能兼容所有瀏覽器或系…

        目前,人們使用手機的頻率越來越高,手機除了聊天,還能實現網站的瀏覽.那么對于手機瀏覽網站應該如何制作呢?現在的移動設備網站頁面基本是使用HTML5 移動頁面自適應系統.

        1、使用meta標簽:viewport

        H5移動端頁面自適應普遍使用的方法,理論上講使用這個標簽是可以適應所有尺寸的屏幕的,但是各設備對該標簽的解釋方式及支持程度不同造成了不能兼容所有瀏覽器或系統。

        viewport 是用戶網頁的可視區域。翻譯為中文可以叫做"視區"。

        手機瀏覽器是把頁面放在一個虛擬的"窗口"(viewport)中,通常這個虛擬的"窗口"(viewport)比屏幕寬,這樣就不用把每個網頁擠到很小的窗口中(這樣會破壞沒有針對手機瀏覽器優化的網頁的布局),用戶可以通過平移和縮放來看網頁的不同部分。

        、使用css3單位rem

        rem是CSS3新增的一個相對單位(root em,根em),使用rem為元素設定字體大小時,是相對大小,但相對的只是HTML根元素。通過它既可以做到只修改根元素就成比例地調整所有字體大小,又可以避免字體大小逐層復合的連鎖反應。

        目前,除了IE8及更早版本外,所有瀏覽器均已支持rem。對于不支持它的瀏覽器多寫一個絕對單位的聲明。這些瀏覽器會忽略用rem設定的字體大小。

        3、使用媒體查詢

        媒體查詢也是css3的方法,我們要解決的問題是適應手機屏幕,這個媒體查詢正是為解決這個問題而生。

        媒體查詢的功能就是為不同的媒體設置不同的css樣式,這里的“媒體”包括頁面尺寸,設備屏幕尺寸等。

        4、使用百分比

        百分比指的是父元素,所有百分比都是這樣的。子元素寬度50%,那么父元素的寬度就是100%;

        所以body默認寬度是屏幕寬度(PC中指的是瀏覽器寬度)子孫元素按百分比定位(或指定尺寸)就可以了,這只適合布局簡單的頁面,復雜的頁面實現很困難。


        網友評論

        登錄后可評論,請登錄

        全部評論:0條

        掃描左側二維碼
        關注至成微信公眾號

        西安至成信息科技有限公司  Copyright 2012-2019  xazcit.com  All rights reserved.

        Email:[email protected]     郵政編碼:710016     《中華人民共和國增值電信業務經營許可證》陜B1.B2-20140011     陜ICP備12008874號-1

        聯系地址:西安市經開區鳳城四路西安國際企業中心B座23層06-10室    售前咨詢熱線:029-89390727    售后服務電話:029-89393039

        西安網站建設、網站設計制作公司-至成科技,已為眾多企業提供網站建設網站制作響應式網站設計手機網站建設虛擬主機云主機服務器租用等建站解決方案。

        網絡警察 12321垃圾信息舉報 不良信息舉報 中國文明網 西安工商
        ×
        安徽25选5计划 重庆百变王牌近100期 今天码报图资料 新疆十一选五怎么玩 陕西11选5玩法技巧 安徽十一选五走势图基本走势图 七星彩走势图带座标 20选5开奖号码 江西11选5两码规律 pc蛋蛋的牛人怎么玩的 搜狐彩票app 2019年内蒙古快三开奖号 福建15选5 澳门百家乐代理 4场进球2019004期 福彩3d复式全排列组合器