Two face questions every day, to consolidate the knowledge points

1px achieve physical pixel

In the moving end web development, UI design draft is set to a border pixel, the distal end during development if there border: 1px, the test will be found on some models, 1px be fairly thick, i.e. a mobile terminal is a more classic 1px pixel problem.

Device device pixels pixel bit dpr = / CSS pixels (one direction) may be obtained by the value of the device dpr window.devicePixelRatio. Generally, the desktop browser, device pixel ratio (DPR) is equal to 1, a physical pixel is represented by a pixel css. In the moving end, most models are not 1, wherein the iphone dpr generally is 2 and 3, it is no longer a css pixel corresponding to a physical pixel, 2 and 3 but physical pixels. That width We usually set in the css: 1px, is the corresponding physical pixel 2px. Different mobile phone models, dpr may be different.

For example with iphone5, iphone5 of CSS pixels 320px 568px, DPR is 2, so the device pixel is 640px 1136px

A Solution

<!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>
复制代码

Solution two

<!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>
复制代码

Elements horizontally centered method

method one

<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>
复制代码

Method Two

<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>
复制代码

Method three (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>
复制代码

Method four (flex new version)

<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>
复制代码

Method five (flex old version)

<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>
复制代码

How to adapt mobile terminal rem

<!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>
复制代码

What is cross-domain? Cross-domain solution?

Cross-domain, referring to the browser can not execute scripts other sites. It is caused by the browser's same-origin policy, are browser security restrictions imposed.

Same Origin Policy

- ——是浏览器安全策略
- ——协议名、域名、端口号必须完全一致
- 举例：
复制代码

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脚本时，会检查这个脚本属于哪个页面，如果不是同源页面，就不会被执行
复制代码

Cross-domain

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

Solution

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

1. jsonp method

So JSONP principle is actually introduced into the script does not restrict the use of source characteristics, the processing function name as a parameter, and then returns to execute the statement, read the following code to understand the meaning of the inside.

Supplementary: 1) JSONP and AJAX contrast

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

2) JSONP advantages and disadvantages

    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>
复制代码

The simple request 2.cors

CORS need a browser and the backend supports. IE 8 and 9 need to be achieved by XDomainRequest. Key browser will automatically communicate CORS, CORS achieve communication is the back-end. As long as the back-end implementation of CORS, to achieve cross-domain. Server set up Access-Control-Allow-Origin can open CORS. This attribute indicates which domains can access resources, if you set a wildcard indicates that all sites can access resources. Although set CORS and front-end does not matter, but to solve the problem of cross-domain in this way, then, two things occur when sending requests were simple request and complex requests.

As long as both of the following two conditions belong to a simple request

Condition 1: One of the following methods:

GET
HEAD
POST

Condition 2: Content-Type value is limited to one of the following three:

text/plain
multipart/form-data
application/x-www-form-urlencoded

XMLHttpRequestUpload any object request are not registered in any event listeners; XMLHttpRequestUpload objects can use XMLHttpRequest.upload property access.

4.websocket

Websocket is a persistent protocol HTML5, which implements a full duplex communication with the server browser, but also a cross-domain solutions. WebSocket and HTTP is an application layer protocol, it is based on the TCP protocol. However WebSocket is a bidirectional communication protocol, after a connection is established, the server and client can WebSocket sends or receives data to each other . Meanwhile, WebSocket connection is established at the time of need the help of HTTP protocol, the connection is established after a good two-way communication between the client and server HTTP nothing to do with it. Native WebSocket API inconvenient to use, we use Socket.io , it nicely encapsulates webSocket interface that provides a more simple, flexible interface, also does not support webSocket browser provides backwards compatibility.

Let's look at an example: the local file socket.html to localhost: 3000 occurrence data and receive data

// 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('我不爱你')
  });
})

复制代码

Summary: CORS support all types of HTTP requests, cross-domain HTTP request is the fundamental solution JSONP only supports GET requests, the advantage of JSONP support older browsers, and can request data from the CORS site does not support. Whether Node middleware proxy or nginx reverse proxy, mainly through homologous strategy on the server without restrictions. Daily work, with more than cross-domain solution is cors and nginx reverse proxy

More Reference: juejin.im/post/5c2399...

Reproduced in: https: //juejin.im/post/5d0a3422e51d4550723b1400