移动端与响应式

移动端与响应式01

meta标签的viewport配置:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 
        viewport:代表视窗的设置
        content="
            width=device-width,     //宽度等于设备的宽度,浏览器宽度分辨率等于系统分辨率
            initial-scale=1,  //初始化比例是1
            minimum-scale=1,    //最小的缩放比例是1
            maximum-scale=1,    //最大的放大比例
            user-scalable=no    //用户不允许缩放
        "
     -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>Document</title>
</head>
<body>
    <h1>hellowWorld</h1>
</body>
</html>

仅对于移动端有效,可以控制用户的缩放程度。
其中还要注意两个概念:物理分辨率与系统分辨率
以iphone8为例,当使用控制台切换的时候,会看到上方显示的分辨率为375*667。
但实际上,iphone8官方给出的分辨率是750*1334。
其实是因为,为了方便我们人眼看清屏幕上的字体,需要将字体放大,因此会将移动端四个分辨率合成一个分辨率。最终显示的是依靠系统分辨率来显示

将width定死的时候,无论什么移动设备,都会依照于设置的值,这样在设置body中的内容时,就不会因为不同设备不同的分辨率导致界面错位混乱的情况,如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=750, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }
        #d1 {
            width: 375px;
            height: 375px;
            background-color: aqua;
        }
        #d2 {
            width: 750px;
            height: 375px;
            background-color: rgb(109, 121, 121);
        }
    </style>
</head>
<body>
    <div id="d1"></div>
    <div id="d2"></div>
</body>
</html>

运行可以发现,不管更改什么样的设备,#d1这个div永远占一半的宽度,#d2这个div永远占整个宽度。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue 3 提供了强大的响应式系统,这对于移动端的布局非常重要。在移动端开发中,响应式布局确保了页面在不同屏幕尺寸和设备上都能自适应地调整布局。Vue 3 的响应式主要依赖于以下核心机制: 1. **Vue实例的响应式属性**:Vue实例的data属性会自动转换为响应式的,这意味着当你修改这些属性时,视图会自动更新。这是通过劫持JavaScript的数据变更通知机制(Object.defineProperty)实现的。 2. **计算属性**:你可以定义计算属性,它们基于其他响应式的属性计算得出,也具备响应性。这使得复杂的计算变得简洁,不需要手动维护状态。 3. **Watch API**:虽然不是直接用于布局,但watch方法允许你在数据变化时执行回调,这对于动态调整样式或执行布局相关的逻辑非常有用。 4. **响应式指令**:Vue提供了一些响应式指令如v-bind, v-model等,用于绑定元素的属性,这些在移动端布局中也有广泛应用,比如v-bind:style可以动态设置元素的样式。 5. **Vue Router** 和 **Vuex** 的配合:当用户导航或组件状态改变时,响应式系统能保证视图的更新和路由的重渲染,这对于动态路由和复杂数据流的管理至关重要。 6. **Vue CLI** 提供的预构建工具和脚手架:可以帮助开发者快速创建适合移动端响应式布局,并支持各种屏幕尺寸的适配策略,如媒体查询和百分比布局。 对于移动端响应式布局的具体实现,你可能需要用到以下技术: - **CSS Flexbox** 或 **CSS Grid**:Vue3不直接处理布局,但你可以使用这两种现代CSS布局模式来创建灵活的网格和响应式容器。 - **CSS变量和主题**:使用CSS变量可以轻松地切换不同主题或屏幕尺寸的样式。 - **响应式设计库**:如Vuetify、Element UI等提供了预设的响应式组件和解决方案。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值