<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          css完美解決網頁在iphoneX的頭部劉海顯示問題

          時間:?2017-11-23閱讀:?9970標簽:?css

          一、解決iphonX白條,網站擴展到整個屏幕

          網頁在iphoneX的瀏覽器屏幕顯示上,默認情況下在頭部的2側會出現白條背景,網站被限制在了一個“安全區域”內,移除白色背景的方法

          方法一:設置body的背景色:

          .body{
               background-color:#f00;
          }

          方法二:添加mate屬性viewport-fit=cover

          <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

          說明viewport-fit有三個值:

          contain:視口完全包括網頁內容,這意味著fixed定位的元素被包含在了iOS 11的安全區內
          cover:網頁內容完全覆蓋視口,這意味著fixed定位的元素將被固定到視口,即它們也可能會被覆蓋,這恢復了我們在ios 10上的行為
          auto:默認值,和contain相同

          方法三:設置safe-srea-inset-*確保安全邊界

          改屬性值適用于:margin、padding ,以及絕對定位的 top 或 left。以padding為例:

          .page{
              padding-top: constant(safe-area-inset-top);
              padding-right: constant(safe-area-inset-right);
              padding-bottom: constant(safe-area-inset-bottom);
              padding-left: constant(safe-area-inset-left);
          }


          二、實現元素滾動自動環繞iPhone X"劉海"

          以下內容來源于http://www.zhangxinxu.com/wordpress/?p=6426

          1.環繞齊劉海滾動實現原理

          CSS Shapes中有個CSS屬性名為shape-outside,可以讓內聯元素以不規則的形狀進行外部排列,其語法如下(參考自MDN

          /* 關鍵字值 */
          shape-outside: none;
          shape-outside: margin-box;
          shape-outside: content-box;
          shape-outside: border-box;
          shape-outside: padding-box;
          
          /* 函數值 */
          shape-outside: circle();
          shape-outside: ellipse();
          shape-outside: inset(10px 10px 10px 10px);
          shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);
          
          /* <url>值 */
          shape-outside: url(image.png);
          
          /* 漸變值 */
          shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px);

          shape-outside屬性要想生效,本身需要是浮動float元素。 本文demo效果實現使用的是shape-outside:polygon(),通過點坐標勾勒出和齊劉海形狀相似的多邊形形狀,CSS代碼為:

          .shape {
            float: left;
            shape-outside: polygon(0 0, 0 150px, 16px 154px, 30px 166px, 30px 314px, 16px 326px, 0 330px, 0 0);
          }

          列表元素就會自動環繞這個形狀排列,也就是自動避開了齊劉海區域。 然后,只要搞個假的iPhone X的齊劉海圖片覆蓋在區域上就可以了。 至此,一個靜態的列表環繞齊劉海的效果就完成了。 下面關鍵的問題是如何讓滾動的時候,列表元素動態的跟著環繞呢? 由于shape-outside所在的元素是浮動元素,因此,必定會跟著容器一起滾動,我們需要的效果是我們所繪制的這個劉海區域需要是固定的,怎么辦?此時,我是借助JavaScript處理的。 原理很簡單,監聽容器的滾動事件,讓我們的shape-outside繪制的區域實時偏移滾動的大小。此時肉眼看上去的效果就是shape-outside區域永遠固定在了滾動容器clientHeight的中間。 整個效果就這么實現了,相關JS如下:

          box.addEventListener('scroll', function () {
            var scrollTop = box.scrollTop;
            // 滾動偏移應用在shape-outside上
            shape.style.shapeOutside = 'polygon(0 0, 0 '+ (150 + scrollTop) +'px, 16px '+ (154 + scrollTop) +'px, 30px '+ (166 + scrollTop) +'px, 30px '+ (314 + scrollTop) +'px, 16px '+ (326 + scrollTop) +'px, 0 '+ (330 + scrollTop) +'px, 0 0)';
          });

          更詳盡的代碼盡在demo頁面

            

          2.CSS Shapes環繞iPhone X劉海的其它更簡易方法

          如果我們的技術選型是更看重簡單易懂,而不是資源消耗與占用,還可以使用shape-outside:url(image.png)語法實現類似的效果,其中'image.png'就是用來被環繞的圖片,環繞與否是基于計算alpha通道決定,用句簡單的話描述,就是沿著圖片非透明區域環繞。 由于使用url()的形狀計算是基于圖片元素,和inset(), circle(), ellipse()或者polygon()這些基礎形狀方法的計算性質不一樣,因此,可以直接使用垂直方向的margin進行偏移。這要比polygon()這樣實時計算坐標位置要好理解的多。 我們不妨看下CSS和JS代碼,如下:

          .shape {
            float: left;
            shape-outside: url(liu-outside.png);
            margin-top: 150px;
          }
          box.addEventListener('scroll', function () {
            var scrollTop = box.scrollTop;
            // 滾動偏移應用在margin-top上
            shape.style.marginTop = (150 + scrollTop) + 'px';
          });

          可以看到,當我們滾動容器的時候,改變的就一個marginTop值就好了;而上面的 shape-outside:polygon()實現需要同時改變多個坐標值。

          demo地址:shape-outside url實現列表環繞iPhone X劉海demo


          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/160

          CSS中的一些細節

          當position設置為:absolute或者fixed時,元素的display會轉換為block。(設置float也會產生這樣的效應)正常情況下,div會被內容撐開,但是如果設置了1.的情況下,父元素就會產生塌陷,失去高度。

          原來 CSS 這樣寫是會讓 App 崩潰的

          之前在自己的個人公眾號中提到了一篇利用 CSS 的方式進行 XSS 攻擊,當時有朋友跟我說,讓我去獲取那個網站的 cookie,再然后進入那個網站的后臺去玩。然而,技術能力實在有限,搞不了這些東西

          如何通過CSS向JS傳參?

          CSS中有很多媒體查詢的用法,例如設備尺寸判別,是否支持鼠標行為,是否是黑暗模式,是否是省電模式等。CSS可以自動檢測,但是有時候,在JS中,我們也需要根據不同的系統主題,然后實現不同的交互邏輯,或者渲染出不一樣的內容。

          Javascript可以控制css嗎?

          JavaScript可以直接控制css。JavaScript中可以直接設置style的屬性、改變class、設置cssText、創建引入新的css樣式文件等方法來控制css樣式。

          為什么 CSS 這么難?

          我同 CSS 打交道已經有幾年了,每當需要就會用到它。最近我想明白了一個問題,那就是為什么做好 CSS 樣式如此之難。如果你一直都在 CSS 中苦苦掙扎,你要知道自己并不是一個人。本文就是要告訴你為什么 CSS 這么難

          css常用代碼

          禁止div點擊;鼠標放置顯示“小手”手勢,并顯示提示文字;超出區域的文字顯示省略號;div+css控制圖片等比例縮放;設置元素在另一個元素的最底部;設置背景顏色,不透明度

          六種組織CSS的方式

          Ben Frain曾經說過,寫css代碼很容易,但是擴展和維護卻很難。本文就介紹了一套方案來解決這個問題。OOCSS 意為面向對象的CSS。這種方法有兩種主要 觀點:結構與設計分離,容器和內容分離

          不為人知的七個CSS知識點

          如果你在日常工作中使用CSS,那么你的主要目標很可能集中在使事情看起來是正確的。最終得到的正確結果遠比如何實現更重要。這意味著相比正確的語法和視覺效果我們更少關注CSS的實現原理。

          Web前端-CSS必備知識點

          css基本內容,類選擇符,id選擇符,偽類,偽元素,結構,繼承,特殊性,層疊,元素分類,顏色,長度,url,文本,字體,邊框,塊級元素,浮動元素,內聯元素,定位。

          css加載會造成阻塞嗎?

          js執行會阻塞DOM樹的解析和渲染,那么css加載會阻塞DOM樹的解析和渲染嗎?所以,接下來我就來對css加載對DOM樹的解析和渲染做一個測試。為了完成本次測試,先來科普一下,如何利用chrome來設置下載速度

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网