ページレイアウトを実現VW

HTML：

<DIV CLASS = "G-コンテナ"> 
    <H2>テンセントビデオ</ H2> 
    <H2>テレビ音声アシスタント</ H2> 
    <P->ビデオ検索などの電話接続可能な音声制御テレビ、後に、スターを検索し、切断されたチャンネル、天気予報をチェック。</ P> 
    <DIV CLASS = "G-BG-例"> </ div> 
    <DIV CLASS = "G-BTNオープン"> Tencentのビデオのダウンロード、使用して音声アシスタント</ div> 
</ div>

CSS：（SCSS）

$ baseFontSize：375; 

@関数のpx2vw（$ PX） { 
    @return $ PX / $ baseFontSize * 100vw。
} 

HTML、本体 { 
    幅：100％ 。
    高さ：100％ ; 
} 

体 { 
    背景画像：半径方向の勾配（50％、50％、＃182537 10％、＃000 90％円）。
} 

.G-容器 { 
    位置：相対。
    オーバーフロー：隠されました ; 
    パディングトップ：px2vw（56） 。
    ボックスサイズ：ボーダーボックス; 
} 

H2 { 
    フォントサイズ：px2vw（32） 。
    色：#FFF ; 
    行の高さ：px2vw（40） 。
    テキストインデント：px2vw（48） 。
} 

、P { 
    幅：px2vw（300） 。
    マージントップ：px2vw（8） ; 
    margin-left：px2vw（48） 。
    フォントサイズ：px2vw（14） 。
    色：HSLA（0,0％、100％,. 5） 。
    行の高さ：px2vw（24） 。
} 

.G-BG-例 { 
    幅：px2vw（300） 。
    高さ：px2vw（209） 。
    マージン：px2vw（32）自動 ; 
    背景：URL（// vmat.gtimg.com/kt/ktweb/pay/imgs/voiceGuide/example-mobile.png）ノー・リピート50％ ; 
    背景サイズ：100％100％ 。
} 

.G-BTNオープン { 
    不透明：1。
    位置：相対 ; 
    幅：px2vw（275） ; 
    高さ：px2vw（48） 。
    マージン：px2vw（34）自動 ; 
    行の高さ：px2vw（48） 。
    ボックスサイズ：ボーダーボックス ; 
    テキスト整列：センター ; 
    テキストインデント：px2vw（39） 。
    境界半径：px2vw（100） 。
    色：#FFF ; 
    フォントサイズ：px2vw（14） 。
    背景：＃eb6b07。
    トランジション：不透明度.5s。
    
    ＆：：{前
        位置：絶対。
        内容："" ; 
        幅：px2vw（20） 。
        高さ：px2vw（18） 。
        左：px2vw（34） 。
        トップ：50％ ; 
        変換：移動Yを（-50％） 。
        背景：URL（// vmat.gtimg.com/kt/ktweb/pay/imgs/voiceGuide/logo.png）ノー・リピート50％ ; 
        背景サイズ：px2vw（20）px2vw（18） 。
    } 
}