文档章节

【外行学IT】手机网页自适应之rem和viewport

前端老手
 前端老手
发布于 09/17 09:47
字数 808
阅读 19
收藏 0

在写手机网页时,对于像素的问题会非常困惑,初学者很多时候会因为那么一个小点的问题解决不了,或者无法理解透彻就放弃了学习。

我在学习写手机网页时也困惑了许久,出现过下面的问题:

图片素材按照640px*330px像素设计,放入img,并且img设置了铺满全屏style:

.img{
    width:100%;
    height:16.5rem;
]

PS:我将html设置了

html{
    font-size:20px;    
}

所以按照rem的算法,img的高度应该是330px/20px=16.5rem(rem怎么用?下片文章会用我们外行的白话来说明)

这时候在chrome谷歌浏览器中调试效果,发现图片宽度变成了980px,然后各种算rem算不对,实在没想明白,为啥自己的图片明明是640px宽,怎么到了浏览器里被放大到980了,后来翻阅了网上各大神的文章,发现移动设备上的浏览器都会把自己默认的viewport设为980px或1024px

所以这个时候需要在<head>里面加入下面的一段代码:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

该meta标签的作用是让当前viewport的宽度等于设备的宽度,同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求,但让viewport的宽度等于设备的宽度,这个应该是大家都想要的效果,如果你不这样的设定的话,那就会使用那个比屏幕宽的默认viewport,也就是说会出现横向滚动条。

这个name为viewport的meta标签到底有哪些东西呢,又都有什么作用呢?

meta viewport 标签首先是由苹果公司在其safari浏览器中引入的,目的就是解决移动设备的viewport问题。后来安卓以及各大浏览器厂商也都纷纷效仿,引入对meta viewport的支持,事实也证明这个东西还是非常有用的。

在苹果的规范中,meta viewport 有6个属性,如下:

width 设置layout viewport  的宽度,为一个正整数,或字符串"width-device"
initial-scale 设置页面的初始缩放值,为一个数字,可以带小数
minimum-scale 允许用户的最小缩放值,为一个数字,可以带小数
maximum-scale 允许用户的最大缩放值,为一个数字,可以带小数
height 设置layout viewport  的高度,这个属性对我们并不重要,很少使用
user-scalable 是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许

这些属性可以同时使用,也可以单独使用或混合使用,多个属性同时使用时用逗号隔开就行了。

本文转载自:https://www.mk2048.com/blog/blog.php?id=bcbbbahaa

前端老手
粉丝 10
博文 557
码字总数 0
作品 0
卢湾
技术主管
私信 提问
拿到一份设计稿,我该如何进行移动端开发?

出来混,那些混过去的,迟早是要还的 ( ̄Д  ̄)┍ 。 让我们来解决几个问题: 1. 什么是 viewport ? 它的的作用是啥? 提到 ,之前总感觉挺突兀的,但是当我最近做移动端项目时,突然关注到一...

一个笑点低的妹纸
09/07
0
0
响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh)

我的博客原文地址:原文地址 简要介绍:前端开发中,静态网页通常需要适应不同分辨率的设备,常用的自适应解决方案包括媒体查询、百分比、rem和vw/vh等。本文从px单位出发,分析了px在移动端...

yuxiaoliang
2018/07/02
0
0
PC前端转移动前端的二三事——移动端适配

一、首先要搞明白移动端适配问题,就要先搞明白像素和视口 像素包含2种像素:物理像素和css像素 物理像素又称设备像素,任何设备的物理像素的数量是固定不变的,单位是pt。所谓的一倍屏、二倍...

Wendy曹
2018/07/01
0
0
响应式和自适应区别

玩前端也有几个月了,发现大家普遍混淆了响应式和自适应的概念。先给大家体验一下响应式和自适应的区别,请放大缩小一下屏幕尝试 自适应的体验http://m.ctrip.com/html5/ 响应式的体验 http...

前端_牛牛
2016/01/20
390
2
移动端 web 开发的设计稿与工作流

致谢 一直以来移动端适配便是困扰自己的一个难题,今天休息,查阅了很多资料将其整理出来。本文中很多做法是直接借鉴了网上的文章,主要有从网易与淘宝的font-size思考前端设计稿与工作流跟手...

明易
2018/12/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

golang-字符串-地址分析

demo package mainimport "fmt"func main() {str := "map.baidu.com"fmt.Println(&str, str)str = str[0:5]fmt.Println(&str, str)str = "abc"fmt.Println(&s......

李琼涛
今天
4
0
Spring Boot WebFlux 增删改查完整实战 demo

03:WebFlux Web CRUD 实践 前言 上一篇基于功能性端点去创建一个简单服务,实现了 Hello 。这一篇用 Spring Boot WebFlux 的注解控制层技术创建一个 CRUD WebFlux 应用,让开发更方便。这里...

泥瓦匠BYSocket
今天
6
0
从0开始学FreeRTOS-(列表与列表项)-3

FreeRTOS列表&列表项的源码解读 第一次看列表与列表项的时候,感觉很像是链表,虽然我自己的链表也不太会,但是就是感觉很像。 在FreeRTOS中,列表与列表项使用得非常多,是FreeRTOS的一个数...

杰杰1号
今天
8
0
Java反射

Java 反射 反射是框架设计的灵魂(使用的前提条件:必须先得到代表的字节码的 Class,Class 类 用于表示.class 文件(字节码)) 一、反射的概述 定义:JAVA 反射机制是在运行状态中,对于任...

zzz1122334
今天
5
0
聊聊nacos的LocalConfigInfoProcessor

序 本文主要研究一下nacos的LocalConfigInfoProcessor LocalConfigInfoProcessor nacos-1.1.3/client/src/main/java/com/alibaba/nacos/client/config/impl/LocalConfigInfoProcessor.java p......

go4it
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部