1. 程式人生 > >HTML+CSS PC端 手機端 公用部分樣式程式碼整理

HTML+CSS PC端 手機端 公用部分樣式程式碼整理

1、css常用公用部分樣式程式碼整理:

  1. body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,  
  2. li, dl, dt, dd, form, a, fieldset, input, th, td  
  3. {margin: 0; padding: 0; border: 0; outline: none;}  
  4. ul, ol{list-style: none;}  
  5. a{color: black;text-decoration: none;}  
  6. a:hover {text-decoration: underline;}  
  7. html{font-size: 10px;font-family: "Microsoft YaHei",Arial;}  
  1. 任意瀏覽器的預設字型高都是16px。所有未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em,10px=0.625em。為了簡化font-size的換算,需要在css中的body選擇器中宣告Font-size=62.5%,這就使em值變為 16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數值除以10,然後換上em作為單位就行了。  

2、手機APP常用部分樣式程式碼整理:

  1. <!-- UC強制全屏 -->
  2.     <metaname="full-screen"content="yes"/>
  3.     <!-- QQ強制全屏 -->
  4.     <metaname="x5-fullscreen"content="true"/>
  5.     <!-- UC應用模式 -->
  6.     <metaname="browsermode"content="application"/>
  7.     <!-- QQ應用模式 -->
  8.     <metaname="x5-page-mode"content="app"/>
  9. <prename="code"class="html"
    ><!-- <span style="font-family: Arial, Helvetica, sans-serif;">螢幕自適應 高度</span> -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
  1. <!-- <span style="font-family: Arial, Helvetica, sans-serif;">js禁止手機瀏覽器裡雙擊放大頁面的功能?</span><span style="font-family: Arial, Helvetica, sans-serif;">--></span>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
  1. <linkrel="stylesheet"media="screen and (min-width:950px) and (max-width:1920px)"href="css/web.css"><!-- web樣式呼叫 -->
  2. <linkrel="stylesheet"name="viewport"media="only screen and (max-device-width:640px)"href="css/phone640.css"><!-- 手機螢幕640px時呼叫 -->