모바일 단말 - 반응형, rem/em, Js를 사용하여 모바일 단말 적응을 동적으로 구현

3G의 대중화로 인해 휴대전화를 사용하여 인터넷에 접속하는 사람들이 점점 더 많아지고 있습니다. 모바일 장치는 인터넷 액세스를 위한 가장 일반적인 터미널로서 데스크톱 장치를 능가하고 있습니다. 결과적으로 웹 디자이너는 어려운 문제에 직면해야 합니다. 다양한 크기의 장치에서 동일한 웹 페이지를 어떻게 렌더링합니까? 이 기사에서는 웹 개발자가 동일한 웹 페이지 코드를 유지 관리하여 웹 사이트가 여러 장치에서 더 나은 읽기 환경을 제공할 수 있도록 하는 적응형 웹 디자인의 개념과 방법을 설명합니다. 이 글에서는 혼란스러워하는 여러분에게 도움이 되기를 바라면서 적응형 웹 페이지의 구현 방법을 자세히 소개합니다.

1. HTML 헤드에 메타 태그 추가

HTML 헤드, 즉 헤드 태그에 메타 태그를 추가하여 웹의 너비를 브라우저에 알려줍니다. 페이지가 기기 화면 너비와 동일하고 Zoom을 진행하지 않는 경우 코드는 다음과 같습니다.

간단히 분석해 보겠습니다. 이 코드 줄의 의미: width=device-width는 웹 페이지의 너비가 다음과 같다는 것을 의미합니다. 장치 화면의 너비,initial-scale=1.0은 페이지의 초기 확대/축소 비율을 1로 설정하고 사용자는 Scalable=no는 사용자의 확대/축소를 금지함을 의미하고 maximum-scale=1.0 및 Minimal-scale=1.0은 최대 및 최소 페이지 확대/축소 비율을 설정한다는 의미입니다. 주요 브라우저는 메타 태그를 다양한 수준으로 구문 분석하므로 모든 브라우저와 호환되도록 최선을 다해야 합니다.

2. 백분율 레이아웃

페이지 레이아웃에서는 레이아웃의 상대 너비와 절대 너비를 결합하는 것이 웹 페이지의 유지 관리에 더 도움이 됩니다.

다음 사진은 iPhone5, iPhone6 ​​​​및 iPhone 6 Plus의 Lagou.com 레이아웃입니다. 기기의 화면 너비가 다르고 표시되는 글꼴 크기와 간격도 알 수 있습니다. 동일한 웹페이지 코드 세트는 모두 다릅니다. 빨간색 선 상자 안의 부분은 백분율 레이아웃을 사용하므로 웹 페이지의 유지 관리가 더 좋아집니다.

       

3. 반응형 페이지 구현

현재 반응형을 구현하는 두 가지 일반적인 방법이 있습니다. 하나는 미디어 쿼리를 사용하는 것입니다. 다른 하나는 부트스트랩의 그리드 레이아웃입니다. 나중에 부트스트랩을 소개할 때 그리드 레이아웃을 소개하겠습니다. 여기서는 주로 미디어 쿼리를 사용하여 반응형 레이아웃을 구현하는 방법에 대해 설명하겠습니다.

　미디어 쿼리, 즉 @media 쿼리 미디어 쿼리는 화면 크기에 따라 스타일을 다르게 설정할 수 있습니다. 특히 반응형 페이지를 디자인해야 하는 경우 @media가 매우 유용합니다. 브라우저 크기를 재설정하면 브라우저의 너비와 높이에 따라 페이지도 다시 렌더링됩니다. 스타일을 설정하는 것이므로 CSS 파일 하단에 미디어쿼리 관련 코드를 넣어주시면 됩니다.

반응형의 사용법을 보다 명확하게 이해하기 위해 아래에 두 가지 사례를 나열했습니다. 첫 번째 경우는 비교적 간단하며 다양한 페이지 너비에서 본문의 배경색을 변경하는 기능을 구현합니다. 두 번째 경우는 사용자의 편의를 위해 특정 프로젝트를 예로 들어 설명합니다.

예시 1:

페이지 너비가 300픽셀 미만인 경우 배경색을 수정합니다. 본문을 빨간색으로:

@media screen and (max-width: 300px) {
    body {
         background-color:red;
    }
}

페이지 너비가 300픽셀보다 크고 600픽셀보다 작은 경우 본문의 배경색을 녹색으로 수정합니다.

@media screen and (min-width: 300px) and (max-width:600px) {
    body {
         background-color:green;
    }
}

如果页面宽度大于 600 像素，则修改body的背景颜色为蓝色:

@media screen and (min-width: 600px) {
    body {
         background-color:blue;
    }
}

 

代码解释：

　　screen 表示电脑屏幕，平板电脑，智能手机等，min-width和max-width 用于定义设备中页面的最小和最大宽度。

实例2：视觉中国首页的响应式实现

　　首先来看该页面在不同窗口中的展示效果：

　　在窗口宽度大于1200px时候的页面样式如下：

 

　　在窗口宽度大于900px并且小于1200px时候页面样式如下：

 

当页面宽度小于900px时候页面样式如下：

 

接下来我们来看具体的代码实现：

　　html代码如下：注意有几张图片则写几个col

<p class="group_wrap">
    <p class="group">
        <p class="col">
            <p class="img_logo">
                <img src="img/8.jpg" alt="">
            </p>
        </p>
        <p class="col">
            <p class="img_logo">
                <img src="img/9.jpg" alt="">
            </p>
        </p>
    </p>
</p>

 

css代码如下，默认是页面宽度大于1200px时候的页面：

.group_wrap{
    width: 100%;
    overflow: hidden;
}
.group{
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;
}
.col{
    width: 280px;
    margin: 10px;
    float: left;
}
.img_logo{
    padding: 10px;
    background: white;
}

 实现响应式代码如下，放在css文件的最下方即可：

/*当页面的宽度在900px ~ 1200px之间的时候*/
@media screen and (min-width: 900px) and (max-width: 1200px){
    .group{
        width: 900px;
    }
}
/*当页面的宽度在600px ~ 900px之间的时候*/
@media screen and (min-width:600px) and (max-width: 900px){
    .group{
        width: 600px;
    }
}

 

总结：实际上响应式页面的实现非常简单，只要认真学，经常练，一定可以熟练掌握的！

 

　　

四. 页面使用相对字体

　　在我们平常的网页布局过程中经常使用绝对单位像素(px)来进行布局，这样的布局不适合我们自适应网页的实现，所以我们现在来介绍两种常见的绝对单位em和rem。rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

　　1. 相对长度单位em

　　　　　　em的特点 : ① em的值并不是固定的; ② em始终会继承父级元素的字体大小。

　　　　　　废话不多说，直接上代码：

html代码：

<p class="one">
    <span>第一层</span>
    <p class="two">
        <span>第二层</span>
        <p class="three">
            <span>第三层</span>
        </p>
    </p>
</p>

 

css代码：

위 내용은 모바일 단말 - 반응형, rem/em, Js를 사용하여 모바일 단말 적응을 동적으로 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!