前端进阶路（二）（pc端适配手机端）

又是一周的周末！如期又来打卡

上周星期四公司下命令将写的pc端网页适配手机端！然后全靠自己钻研出------直接上代码：

（1）css的媒体查询（@media）和js判断是移动端还是pc端结合使用

 

one：先把移动端的样式写好（部分代码）：

.template-background-color {
    position: relative;
    background-color: rgba(243, 242, 240, 0.8);
    width: 122%;
}

/*内容区大小*/
.template-background {
    position: relative;
    width: 1200px;
    margin: 0 auto;
    /*调试颜色*/
    /*background-color: red;*/
}

/*了解更多按钮*/
.power-trans-font button {
    background-color: #ed6f32;
    border-radius: 5px;
    border: 0;
    font-size: 20px;
    transform: translateY(200%);
    width: 180px;
    height: 50px;
    color: #ffffff;
}

.power-trans-font button:hover {
    background-color: rgba(237, 111, 50, 0.87);
}

/*标题样式*/
.power-trans-font h1 {
    font-weight: bold;

}

/*字母样式*/
.power-trans-font p {
    font-size: 31px;
    color: #ADACAC;
    margin-top: -10px;
}

/*字体自动换行样式*/
.power-trans-font-div {
    width: 380px;
}

.power-trans-font-div h2 {
    line-height: 35px;
    font-size: 33px;
    color: #636363;
}

/*物流新体验中的div距顶端距离*/
.power-trans-other {
    transform: translateY(20%);
}

/*六大优势/content-other*/
.six-order {
    /*调试颜色*/
    /*background-color: black;*/
}

.six-order-font h1 {
    padding-top: 20px;
    text-align: center;
    font-weight: bold;
}

.six-order-font p {
    margin-top: -10px;
    font-size: 31px;
    text-align: center;
    color: #ADACAC;
}

.other-p {
    margin-top: -39px;
}

/*黄色栏条样式*/
.six-order-border {
    position: relative;
    margin: 10px auto;
    border-radius: 0;
    width: 200px;
    height: 20px;
    background-color: #ed6f32;
}

.oms-icon-base.tms-icon-base {
    transform: translateY(9%);
}

.oms-icon-div.tms-icon p {
    width: 150px;
}

.other-icon p {
    top: 50px;
    transform: translateY(50%);
}

two：js默认是显示pc端样式，判断是否为移动端，调用对应的样式
// 判断是否为移动端
// 每次pc和移动端切换需刷新显示对应的样式
function goPAGE() {
    if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
        // window.location.href="移动端url";
        // alert("mobile");
        //判断访问环境是 移动端 则加载以下样式
        setStyle(['dist/css/phone-index.css' ，'对应的移动端其它css文件']);
    }
    else {
        // window.location.href="pc端url";
        // alert("pc")
    }
}
goPAGE();
到此 适配问题基本解决！

---------------------------------每周打卡 大家加油------------------------------------

提前祝大家新年快乐！！！