css前端初始化

寵來也發布于2019-08-02 11:09 / 906人閱讀

摘要：初入前端，若有不足歡迎指正頭部初始化標簽問題一般要添加背景音樂的話，我們的第一反應就是使用標簽，但是這里有一個坑。

前言

當下移動端橫行，平常我們做一些移動端的項目，接觸最多的就是H5，雖然做移動端不用兼容IE，但是
我們要兼容微信、app、ios、android... 今天就給寫幾個平常開發經常會遇到的問題以及解決辦法。

初入前端，若有不足 歡迎指正！

頭部初始化

1.audio標簽問題

一般要添加背景音樂的話，我們的第一反應就是使用audio標簽，但是這里有一個坑。如果你的項目是一進頁面就要播放音樂的話，audio標簽在微信端是不生效的。這時候我們可以添加如下代碼：

 document.addEventListener("WeixinJSBridgeReady", function () {
        audioAutoPlay(‘XXX’);//給一個全局函數
    },false);
    //兼容ios微信不能一打開就播放音樂
    function audioAutoPlay(id){ //全局控制播放函數
        var audio = document.getElementById(id),
            play = function(){
            audio.play();
        document.removeEventListener(“touchstart”,play,false);
            };
        audio.play();
        document.addEventListener(“touchstart”,play,false);
    }

原理：

我們給一它一個全局的函數，自動執行一次就可以了。

2.video標簽問題 a. app里面不能控制隨心所欲的控制視頻的播放和暫停。

解決辦法：

var video=$("#video")[0];
        $("#video").click(function(){
                  if($(this).hasClass("pls")){
                        video.play();
                  }else{
                        video.pause();
            }
            $("#video").toggleClass("pls")
        })

如果出現這種情況的話，我們就不能使用系統自帶的控制播放和暫停的功能了，需要我們自己封裝一段控制播放和暫停的方法出來。

b.微信端自動播放

3.彈出鍵盤問題

ios手機彈出鍵盤有時候會遮住輸入框，給人一種很不爽的體驗，但是這種情況很少出現。下面簡單介紹一下解決辦法：

 keyboardEvent:function($footer,winHeight){
    //這里默認軟鍵盤的高度小于屏幕高度的二分之一
    $(window).resize(function(){
        var currentWinHeight = $(window).height();
        if(isInputsFocus($(‘input’)) && currentWinHeight < winHeight/1.2){
            //鍵盤彈出
            $footer.hide()
        }
        if(currentWinHeight >= winHeight/1.2){
            //鍵盤收起
            $footer.show()
        }
    });
}
Var isInputsFocus = function($inputs){
    if($inputs && $inputs.length > 0){
        for(var i=0;i<$inputs.length;i++){
            if($($inputs[i].is(“:focus”))){
                return true
            }
        }
        return false
    }
    return false
}

4.獲取文檔滾動高度

常用的獲取方式是 document.documentElement.scrollTop 但是在手機上不生效。查了好久也不知道哪里有問題。后來偶然發現document.body.scrollTop 就生效了，但是PC又不行了，所以建議大家做一下判斷

5.zepto獲取select文本

我們平常使用的是

$("#select").val()//獲取option的value值；
$("#select").find("option:selected").text()//獲取option的文本

但是在使用zepto的時候竟然報錯。研究好久不曉得是什么原因。后來查了下zepto的api 發現獲取方法改了?，F在是

$("#select option").not(function(){ return !this.selected }).val()//獲取value值
$("#select option").not(function(){ return !this.selected }).text()//獲取文本值

6.swiper圖片超出父級盒子

給img添加

window.onload = function () {
    var u = navigator.userAgent;
    if (u.indexOf("Android") > -1 || u.indexOf("Linux") > -1) {//安卓手機
        phoneType = 0;
    } else if (u.indexOf("iPhone") > -1) {//蘋果手機
        phoneType = 1;
    } else if (u.indexOf("Windows Phone") > -1) {//winphone手機
        phoneType =2;
    }
};

7.幀動畫的簡單實現

var timeout = 1000; //每隔100ms
var index = 1;
var am,
  am = setInterval(function () {
      if (index >= $(".roll").length) {
          $(".roll").removeClass("run");
          clearInterval(am);
          $(".goinfo").removeClass("hide");
              console.log("res enter");
      } else {
          $(".roll").eq(index++).addClass("run");
      }
  }, timeout);

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
    margin:0;
    padding:0;
}
a {
  text-decoration: none;
}
ul,ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
img {vert-align: top;} //移動端圖片邊框   相當于  border:0

a,
input,
button {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
//-webkit-tap-highlight-color:rgba(0,0,0,0);//透明度設置為0，去掉點擊鏈接和文本框對象時默認的灰色半透明覆蓋層(iOS)或者虛框(Android) 
input，textarea{outline:none}  
//取消chrome下默認的文本框聚焦樣式

-webkit-appearance: none;
//消除輸入框和按鈕的原生外觀，在iOS上加上這個屬性才能給按鈕和輸入框自定義樣式 

-webkit-user-select: none;
// 禁止頁面文字選擇 ，此屬性不繼承，一般加在body上規定整個body的文字都不會自動調整
input,
button {
  -webkit-appearance: none;
  border-radius: 0;
}
//去掉IOS移除原生控件樣式

-webkit-touch-callout:none; 
// 禁用長按頁面時的彈出菜單

body {
  margin: 0;
  -webkit-user-select: none;
}
//禁止移動端用戶進行復制.選擇.

body * {
  -webkit-user-select: none;
  font-family: Helvetica;
}

body {
  -webkit-text-size-adjust: 100%;
}
//移動端橫豎屏字體乎大乎小

-webkit-text-size-adjust: none; 
//禁止文字自動調整大小(默認情況下旋轉設備的時候文字大小會發生變化)，此屬性也不繼承，一般加在body上規定整個body的文字都不會自動調整

云服務器 GPU云服務器前端css css前端前端css框架浮動-前端-css

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/52795.html

前端開發篇——瀏覽器默認樣式及css初始化

摘要：為什么要初始化建站老手都知道，這是為了考慮到瀏覽器的兼容問題，其實不同瀏覽器對有些標簽的默認值是不同的，如果沒對初始化往往會出現瀏覽器之間的頁面差異。當然，初始化樣式會對有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。為什么要初始化css? 建站老手都知道，這是為了考慮到瀏覽器的兼容問題，其實不同瀏覽器對有些標簽的默認值是不同的，如果沒對CSS初始化往往會出現瀏覽器...

luoyibu 2019-08-30 13:21 評論0 收藏0
前端開發篇——瀏覽器默認樣式及css初始化

摘要：為什么要初始化建站老手都知道，這是為了考慮到瀏覽器的兼容問題，其實不同瀏覽器對有些標簽的默認值是不同的，如果沒對初始化往往會出現瀏覽器之間的頁面差異。當然，初始化樣式會對有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。為什么要初始化css? 建站老手都知道，這是為了考慮到瀏覽器的兼容問題，其實不同瀏覽器對有些標簽的默認值是不同的，如果沒對CSS初始化往往會出現瀏覽器...

dunizb 2019-08-01 16:10 評論0 收藏0
前端面試題-CSS選擇器性能優化

摘要：不要在編寫規則時用標簽名或類名不要在編寫規則時用標簽名把多層標簽選擇規則用規則替換，減少查找避免使用子選擇器后代選擇器在中是最昂貴的選擇器。如果你關心頁面性能的話，他們真不該被使用擴展閱讀前端面試題選擇器前端面試題優先級一、CSS選擇符 CSS選擇符由一些初始化參數組成，這些參數指明了要應用這個CSS規則的頁面元素。作為一個網站的前端開發工程師，應該避免編寫一些常見的開銷很大的CS...

Scott 2019-08-30 14:08 評論0 收藏0
前端面試題-CSS選擇器性能優化

摘要：不要在編寫規則時用標簽名或類名不要在編寫規則時用標簽名把多層標簽選擇規則用規則替換，減少查找避免使用子選擇器后代選擇器在中是最昂貴的選擇器。如果你關心頁面性能的話，他們真不該被使用擴展閱讀前端面試題選擇器前端面試題優先級一、CSS選擇符 CSS選擇符由一些初始化參數組成，這些參數指明了要應用這個CSS規則的頁面元素。作為一個網站的前端開發工程師，應該避免編寫一些常見的開銷很大的CS...

XGBCCC 2019-08-01 18:42 評論0 收藏0
從零開始做Vue前端架構（1）

摘要：前言想想也已經做過不少架構的項目了，有基于，基于，基于，基于的。好了，介紹完畢，接下來，我就從零開始，一步一步建起前后端完全分離的前端架構了。前言想想也已經做過不少架構的項目了，有基于vue，基于react，基于thinkPHP，基于laravel的。做多了，也就對現有的架構有各種想法，有好的，有壞的，總之，用起來還是不爽。vue-cli雖然可以很快地構建并使用，尤其是vue-c...

frolc 2019-06-24 17:56 評論0 收藏0
360前端星學習筆記-深入css(2)

摘要：課程一繼承某些元素會自動繼承其父元素的計算值舉例上述代碼，標簽里的就會繼承父元素的，為。顯示繼承給設置顯示繼承根元素下所有元素除獨自設置如的都是。二初始值當向上繼承到頂點還是沒找到值的話，就需要初始值了。課程ppt 一、css繼承 1.1 某些元素會自動繼承其父元素的計算值舉例： This is a test of inherit. p { color: #666; ...

William_Sang 2019-08-29 15:38 評論0 收藏0