使用 flex 布局构建一个 iphone 样式的容器---基于react，styled-components

转自：https://blog.zhuliang.ltd/2018/12/frontend/create-iphone-container.html

比较适合需要自搭建 CMS 时候，模拟 iphone。
已设定组件的 props.children，即为 iphone 容器屏幕显示的内容。

样式中已增加 overflow-y 效果（已隐藏 y 轴）。

效果图：

2a9524b1-5a2b-4f28-953a-babda791ef1e.gif

页面结构

import React from 'react';
import {
    Container,
    TopContainer,
    CameraPhoneWrapper,
    HeaderWrapper,
    LightSensor,
    CameraFront,
    HeadPhone,
    HeadPhoneSpace,
    HeaderBottomSpace,
    StatusBar,
    SignalWrapper,
    SignalDot,
    LTEWrapper,
    BatteryWrapper,
    BatteryHead,
    BatteryBody,
    BatteryPercentWrapper,
    ContentWrapper,
    BottomWrapper,
    TouchButton
} from './style';
export default (props) => {
    return (
        
            
                
                    
                    
                    
                    
                    
                    
                
                
                
                    
                        
                        
                        
                        
                        
                        4G
                    
                    
                        
                        
                        66%
                    
                
            
            
                 {props.children}
            
            
                
            
        
    );
}

样式

import styled from 'styled-components';
export const Container = styled.div`
width: 375px;
height: 750px;
background-color: white;
border-radius: 50px;
border: 7px solid #c0c0c0;
display:flex;
flex-direction:column;
justify-content:space-between;
`
/*听筒、传感器、前置摄像头等头部 start*/
export const TopContainer = styled.div`
`
export const HeaderWrapper = styled.div`
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
`
export const HeaderBottomSpace = styled.div`
height:20px;
`
export const LightSensor = styled.div`
width: 7px;
height: 7px;
border-radius: 50%;
background-color: #000;
margin-top:13px;
margin-bottom:7px;
`
export const CameraPhoneWrapper = styled.div`
display:flex;
`
export const CameraFront = styled.div`
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #000;
margin-right:5px;
`
export const HeadPhone = styled.div`
border-radius: 5px;
width: 100px;
height: 4px;
background-color: #000;
margin-top:3px;
`
export const HeadPhoneSpace = styled.div`
width: 7px;
`
/*听筒、传感器、前置摄像头等头部 end*/
/*信号、电量等bar start*/
export const StatusBar = styled.div`
background-color:black;
display:flex;
align-items:center;
justify-content:space-between;
`
export const SignalWrapper = styled.div`
display:flex;
align-items:center;
:nth-child(1){
margin-left:5px;
}
`
export const SignalDot = styled.div`
width: 7px;
height: 7px;
border: 1px solid #fff;
border-radius: 50%;
display: block;
margin-right: 3px;
&.hasSignal{
background-color: #fff;
}
`
export const LTEWrapper = styled.div`
color: #fff;
`
export const BatteryWrapper = styled.div`
color: #fff;
display:flex;
flex-direction:row-reverse;
align-items:center;
`
export const BatteryHead = styled.span`
width: 3px;
height: 5px;
display: block;
background-color: #fff;
margin-right: 3px;
`
export const BatteryBody = styled.div`
width: 25px;
height: 10px;
border: 1px solid #fff;
&::before{
width: 12px;
height: 9px;
background: #fff;
content: "";
display: block;
}
`
export const BatteryPercentWrapper = styled.div`
color: #fff;
display: block;
margin-right:3px;
`
/*信号、电量等bar end*/
/*屏幕显示区域 start*/
export const ContentWrapper = styled.div`
width:100%;
flex-grow:1;
background-color:gray;
overflow-y: scroll;
&::-webkit-scrollbar{
display:none;
}
`
/*屏幕显示区域 end*/
/*底部touch区域 start*/
export const BottomWrapper = styled.div`
display:flex;
justify-content:center;
align-items:center;
height:85px;
`
export const TouchButton = styled.div`
width: 50px;
height: 50px;
border-radius: 50%;
border: 3px solid #9A7371;
`
/*底部touch区域 end*/