知識・ポイントを統合するために、2つの顔の質問毎日、

その他 2019-06-30 15:14:17 訪問数: null

1pxの物理的なピクセルを実現

移動端ウェブ開発において、UI設計案は、境界画素に設定され、境界があれば開発中遠位端：1ピクセル、試験は、いくつかのモデルに見出されるであろうが、1ピクセルは、かなりの厚さ、すなわち、移動端末は、より古典的です1ピクセルのピクセルの問題。

デバイスデバイス画素の画素ビットDPR = / CSSピクセル（一方向）は装置DPR window.devicePixelRatioの値によって得ることができます。一般に、デスクトップブラウザは、デバイスピクセル比（DPR）は、物理的な画素は、画素CSSで表される、1に等しいです。iPhoneのDPRは、一般的に2及び3であることを特徴とする請求移動端では、ほとんどのモデルが1ではない、それはもはや物理的画素、2及び3が、物理画素に対応するCSSピクセルではありません。我々は通常、CSSに設定することを幅1ピクセルは、対応する物理画素2ピクセルです。別の携帯電話モデルは、DPRは異なる場合があります。

iPhone5の、CSSピクセル320ピクセルのiPhone5のと例えば568px、DPRは2であるので、デバイスの画素が640ピクセルである 1136px

ソリューション

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- initial-scale=1.0 缩放比 当为1的时候没用进行任何缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>1px物理像素实现(方案一)</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 0.5rem;
            height: 0.5rem;
            border-bottom: 1px solid #000;
        }
    </style>
    <!-- 像素比 = 物理像素 / css像素 -->
</head>

<body>
    <div id="box"></div>
</body>
<script type="text/javascript">
    window.onload = function () {
        //像素比是什么？针对不同屏幕 dpr不一样
        var dpr = window.devicePixelRatio;
        console.log(dpr);
        //缩放比例
        var scale = 1 / dpr;
        //可视区域的宽度
        var width = document.documentElement.clientWidth;
        //获取mate标签
        var metaNode = document.querySelector('meta[name="viewport"]');
        metaNode.setAttribute('content',"width=device-width, initial-scale='+scale+'");

        //页面中元素的宽度，高度，比例得反向乘回来
        var htmlNode = document.querySelector('html');
        htmlNode.style.fontSize = width * dpr + 'px';

    }
</script>
</html>
复制代码

ソリューション2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- initial-scale=1.0 缩放比 当为1的时候没用进行任何缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>1px物理像素实现(方案二)</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 200px;
            height: 200px;
            position: relative;
        }

        #box:before {
            content:'';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 1px;
            background: #000;

        }
        @media screen and (-webkit-min-device-pixel-ratio:2) {
            #box:before {
                transform: scaleY(0.5);
            }
        }
        @media screen and (-webkit-min-device-pixel-ratio:3) {
            #box:before {
                transform: scaleY(0.333333);
            }
        }
    </style>
</head>

<body>
    <div id="box"></div>
</body>
<script type="text/javascript">
    window.onload = function () {

    }
</script>
</html>
复制代码

要素は、水平方向の方法を中心に

この方法の一つ

<style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #wrap {
            width: 100px;
            height: 100px;
            background:grey;
            position: relative;
        }
        #wrap .box {
            width: 50px;
            height: 50px;
            background:pink;
            position: absolute;
            top:0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
复制代码

方法二

<style type="text/css">
        #wrap {
            width: 100px;
            height: 100px;
            background:grey;
            position: relative;
        }
        #wrap .box {
            width: 50px;
            height: 50px;
            background:pink;
            position: absolute;
            top:50%;
            left: 50%;
            margin-left:-25px;
            margin-top:-25px;
        }
    </style>
复制代码

方法3（CSS3）

<style type="text/css">
        #wrap {
            width: 100px;
            height: 100px;
            background:grey;
            position: relative;
        }
        #wrap .box {
            width: 50px;
            height: 50px;
            background:pink;
            position: absolute;
            top:50%;
            left: 50%;
            transform: translate(-50% , -50%);
        }
    </style>
复制代码

方法4（フレックス新バージョン）

<style type="text/css">
        #wrap {
            width: 100px;
            height: 100px;
            background:grey;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #wrap .box {
            width: 50px;
            height: 50px;
            background:pink;
        }
    </style>
复制代码

方法5（フレックス旧バージョン）

<style type="text/css">
        #wrap {
            width: 100px;
            height: 100px;
            background:grey;
            display: -webkit-box;
            -webkit-box-pack:center;
            -webkit-box-align: center;
        }
        #wrap .box {
            width: 50px;
            height: 50px;
            background:pink;
        }
    </style>
复制代码

携帯端末レムを適応する方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>rem适配</title>
    <style type="text/css">
        #wrap {
            width: 0.5rem;
            height: 0.5rem;
            background:grey;
        }
        /* html 根元素字体大小设置屏幕区域的宽度 */
    </style>
</head>

<body>
    <div id="wrap">
        <div class="box"></div>
    </div>
</body>
<script type="text/javascript">
    window.onload = function () {
        //获取屏幕区域的宽度
        var width = document.documentElement.clientWidth;
        //获取html
        var htmlNode = document.querySelector('html');
        //设置字体大小
        htmlNode.style.fontSize = width + 'px';

    }
</script>
</html>
复制代码

クロスドメインとは何ですか？クロスドメインソリューション？

クロスドメイン、ブラウザを参照すると、スクリプトに他のサイトを実行することはできません。これは、ブラウザの同一生成元ポリシーによって引き起こされ、課されたブラウザのセキュリティ制限があります。

同一生成元ポリシー

- ——是浏览器安全策略
- ——协议名、域名、端口号必须完全一致
- 举例：
复制代码
http://www.123.com/index.html 调用 http://www.123.com/server.php （非跨域）

http://www.123.com/index.html 调用 http://www.456.com/server.php （主域名不同:123/456，跨域）

http://abc.123.com/index.html 调用 http://def.123.com/server.php （子域名不同:abc/def，跨域）

http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.php （端口不同:8080/8081，跨域）

http://www.123.com/index.html 调用 https://www.123.com/server.php （协议不同:http/https，跨域）

请注意：localhost和127.0.0.1虽然都指向本机，但也属于跨域。

浏览器执行javascript脚本时，会检查这个脚本属于哪个页面，如果不是同源页面，就不会被执行
复制代码

クロスドメイン

- 违背同源策略就会产生跨域
复制代码

ソリューション

- jsonp cors websocket Node中间件代理(两次跨域) ngix反向代理...
复制代码

1. JSONP方法

だから、JSONP原理は、実際にソースの特性の使用を制限するものではありませんスクリプトに導入され、処理関数名をパラメータとして、その後、内部の意味を理解するために、次のコードを読んで、文を実行するために戻ります。

補足：1）JSONPとAJAXコントラスト

    JSONP和AJAX相同，都是客户端向服务器端发送请求，从服务器端获取数据的方式。但AJAX属于同源策略，JSONP属于非同源策略（跨域请求）
复制代码

2）JSONPの長所と短所

    SONP优点是简单兼容性好，可用于解决主流浏览器的跨域数据访问的问题。缺点是仅支持get方法具有局限性,不安全可能会遭受XSS攻击。
复制代码
<script>
        //创建 script 标签
        var script = document.createElement('script');
        //设置回调函数
        function getData(data) {
            //数据请求回来被触发的函数
            console.log(data);
        }
        //设置script的src属性，设置请求地址
        script.src = 'http://localhost:3000?callback = getData';
        //让script生效
        document.body.appendChild(script);
    </script>
复制代码

シンプルな要求2.cors

CORSは、ブラウザとバックエンドのサポートを必要としています。IE 8と9はXDomainRequestによって達成される必要があります。主なブラウザが自動的にCORSを通信する、CORSは、通信を実現するバックエンドです。クロスドメインを達成するために、CORSのバックエンドの実装限り。サーバーのセットアップアクセス制御 - 許可 - 起源は、CORSを開くことができます。この属性は、ワイルドカードを設定した場合、すべてのサイトがリソースにアクセスできることを示し、ドメインがリソースにアクセスできるかを示します。セットCORSとフロントエンドは関係ありませんが、このようにクロスドメインの問題を解決するものの、その後、二つのことは、送信側の要求は単純な要求と複雑な要求があったときに起こります。

限り、以下の2つの条件の両方として単純な要求に属し

条件1：次のいずれかの方法

  • 取得する
  • 頭
  • 役職

条件2：Content-Typeの値は、次の3つのいずれかに制限されます。

  • text / plainの
  • マルチパート/フォームデータ
  • アプリケーション/ x-www-form-urlencodedで

イベントリスナーに登録されていない任意のオブジェクト要求をXMLHttpRequestUpload; XMLHttpRequestUploadオブジェクトはXMLHttpRequest.uploadプロパティへのアクセスを使用することができます。

4.websocket

WebSocketは、サーバブラウザで全二重通信を実現する永続プロトコルHTML5、だけでなく、クロスドメインソリューションです。WebSocketとHTTPは、それがTCPプロトコルに基づいて、アプリケーション層プロトコルです。しかしのWebSocketは、接続が確立された後、サーバとクライアントがのWebSocketを送信するか、相互にデータを受信することができ、双方向通信プロトコルです。一方、WebSocketの接続はHTTPプロトコルの助けを必要とする時に確立され、接続がそれを行うには、クライアントとサーバーのHTTP何の間の良好な双方向通信の後に確立されています。使用するのは不便ネイティブのWebSocket APIは、我々が使用Socket.ioを、それがうまく、よりシンプルで柔軟なインターフェースを提供しWebSocketのインターフェースをカプセル化し、また、WebSocketのブラウザは下位互換性を提供してサポートしていません。

ローカルファイルsocket.html：例を見てみましょう3000：localhostの発生データとデータを受け取ります

// socket.html
<script>
    let socket = new WebSocket('ws://localhost:3000');
    socket.onopen = function () {
      socket.send('我爱你');//向服务器发送数据
    }
    socket.onmessage = function (e) {
      console.log(e.data);//接收服务器返回的数据
    }
</script>

复制代码
// server.js
let express = require('express');
let app = express();
let WebSocket = require('ws');//记得安装ws
let wss = new WebSocket.Server({port:3000});
wss.on('connection',function(ws) {
  ws.on('message', function (data) {
    console.log(data);
    ws.send('我不爱你')
  });
})

复制代码

概要：CORSは、HTTPリクエストのすべてのタイプをサポートする、クロスドメインのHTTPリクエストがJSONPだけGETリクエストサポート根本的な解決策である、JSONPの利点は、古いブラウザをサポートし、サポートしていませんCORSサイトからデータを要求することができます。ノードのミドルウェアプロキシまたはnginxのは、主に制限はなく、サーバー上の相同戦略を通じて、リバースプロキシかどうか。クロスドメインソリューションよりも毎日の仕事は、CORSとnginxのリバースプロキシです

その他のリファレンス：juejin.im/post/5c2399 ...

ます。https：//juejin.im/post/5d0a3422e51d4550723b1400で再現

おすすめ

転載: blog.csdn.net/weixin_33716154/article/details/93182311
おすすめ
ランキング
欲張りアルゴリズムLeetcode45ジャンプゲームの証明プロセス
Résumé des outils couramment utilisés pour l'acoustique et l'informatique musicale (soundfile, librosa, pydub, madmom, spleeter)
OpenCVの。コンセプト
直接公式招待コード88886981の下ダイハツ
ミリ秒の形式に現在時刻を取得するJava
umijs/plugin-qiankun (vue+umi) に基づくマイクロフロントエンド構成
クローン化されたカードからLinux仮想マシンは、eth1にはeth0になり
10G SFP + 10G XFP光モジュール及び光モジュール
DevExpressがDateEditを設定して年、月、四半期を表示
Mavenがローカルに外部jarパッケージをインポートする
アーカイブ
もっと
2024-05-19(0)
2024-05-18(30)
2024-05-17(6)
2024-05-16(24)
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)

コードワールド

© 2018 codetd.com