移动web之响应式设计

最新推荐文章于 2022-11-15 20:51:46 发布
最新推荐文章于 2022-11-15 20:51:46 发布
阅读量210 收藏
点赞数
分类专栏： 日志 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38944959/article/details/88405807
版权

理论基础：
适配问题：屏幕尺寸不一样
解决方案：百分比，自适应布局，叫做流式布局，同时还需要对移动端的viewport视口进行设置才能达到目的
流式布局的特点：非固定像素，内容向两侧填充
视觉窗口：viewport是移动端特有的，看成是一个虚拟的区域，用来承载网页，其关系：浏览器承载viewport,而viewport承载网页
适配方案的要求：
1、网页的宽度必须与浏览器保持一致
2、默认显示的缩放比例和pc端保持一致–>缩放比例：1.0
适配设置：
viewport适配功能：
1、设置宽度 width=device-width 视口的宽度等于当前设备的宽度
2、设置高度 height
3、设置缩放比例 initial-scale=1.0
4、设置视口是否允许用户自行缩放 user-scalable=no (no不允许，yes允许，1/0)
5、最大缩放比例 maximun-scale=1.0
6、设置最小缩放比例 mmininum-scale=1.0
》了解更多…

实例：京东移动端页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东移动端-首页</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="jd-container">
    <!--顶部搜索-->
    <div class="jd-search">
        <a href="javascript:;" class="icon-logo"></a>
        <form action="">
            <span class="icon-search"></span>
            <input class="search" type="search" placeholder="请输入">
        </form>
        <a href="javascript:;" class="jd-login">登录</a>
    </div>

    <!--轮播图-->
    <div class="jd-banner">
        <img src="images/l2.jpg" alt="">
    </div>

    <!--导航栏-->
    <div class="jd-nav">
        <div class="nav-list">
            <img src="images/nav0.png" alt="">
            <span>分类</span>
        </div>
        <div class="nav-list">
            <img src="images/nav1.png" alt="">
            <span>分类</span>
        </div>
        <div class="nav-list">
            <img src="images/nav2.png" alt="">
            <span>分类</span>
        </div>
        <div class="nav-list">
            <img src="images/nav3.png" alt="">
            <span>分类</span>
        </div>
        <div class="nav-list">
            <img src="images/nav4.png" alt="">
            <span>分类</span>
        </div>
        <div class="nav-list">
            <img src="images/nav5.png" alt="">
            <span>分类</span>
        </div>
        <div class="nav-list">
            <img src="images/nav6.png" alt="">
            <span>分类</span>
        </div>
        <div class="nav-list">
            <img src="images/nav7.png" alt="">
            <span>分类</span>
        </div>
    </div>

    <!--商品区块-->
    <div class="jd-product">
        <div class="zs-product">
            <div class="zs-product-t">
                <span class="time-icon"></span>
                <span class="text-info">掌上描述</span>
                <ul class="time-text">
                    <li>12</li>
                    <li>12</li>
                    <li class="none">:</li>
                    <li>12</li>
                    <li>12</li>
                    <li class="none">:</li>
                    <li>12</li>
                    <li>12</li>
                </ul>
                <span class="more f-r">更多</span>
            </div>
            <div class="zs-product-c">
                <div class="img-list">
                    <img src="images/detail01.jpg" alt="">
                </div>
                <div class="img-list">
                    <img src="images/detail02.jpg" alt="">
                </div>
                <div class="img-list none">
                <img src="images/detail01.jpg" alt="">
            </div>
            </div>
            <div class="zs-product-b">
                <div class="price-list">
                    <p class="price">￥10.00</p>
                    <p class="del">￥100.00</p>
                </div>
                <div class="price-list">
                    <p class="price">￥10.00</p>
                    <p class="del">￥100.00</p>
                </div>
                <div class="price-list">
                    <p class="price">￥10.00</p>
                    <p class="del">￥100.00</p>
                </div>
            </div>
        </div>
        <div class="jd-shop">
            <div class="jd-shop-t">京东超市</div>
            <div class="jd-shop-b">
                <div class="left f-l">
                    <img src="images/cp1.jpg" alt="">
                </div>
                <div class="right f-l">
                    <div class="right-t">
                        <img src="images/cp2.jpg" alt="">
                    </div>
                    <div class="right-b">
                        <img src="images/cp3.jpg" alt="">
                    </div>
                </div>
            </div>
        </div>
        <div class="jd-shop">
            <div class="jd-shop-t">京东自营</div>
            <div class="jd-shop-b">
                <div class="right f-l">
                    <div class="right-t">
                        <img src="images/cp5.jpg" alt="">
                    </div>
                    <div class="right-b">
                        <img src="images/cp6.jpg" alt="">
                    </div>
                </div>
                <div class="left f-l">
                    <img src="images/cp4.jpg" alt="">
                </div>
            </div>
        </div>
        <div class="jd-shop">
            <div class="jd-shop-t">京东热门</div>
            <div class="jd-shop-b">
                <div class="left f-l">
                    <img src="images/cp1.jpg" alt="">
                </div>
                <div class="right f-l">
                    <div class="right-t">
                        <img src="images/cp2.jpg" alt="">
                    </div>
                    <div class="right-b">
                        <img src="images/cp3.jpg" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <iframe src="public.html" frameborder="0" width="100%" height="40px" style="position: fixed;bottom: 0;left: 0;"></iframe>
    <script src="js/common.js"></script>
    <script src="js/index.js"></script>
</div>
</body>
</html>

最终效果图?
在这里插入图片描述

一只前端小白
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
移动WEB响应式设计
测试猫
10-14 666
pc上的web页面在手机移动端等设备上显示要加入meta标签中的viewport对页面进行渲染，否则排版出现错乱。 width：设置布局viewport的特定值("device-width")设备宽度 initial-scale：设置页面的初始缩放 minumum-scale：最小缩放 maximum-scale：最大缩放 user-scaleable：用户能否缩放 initial
移动端与响应式
qq_42388524的博客
11-19 233
移动端与响应式 *小知识点：随着时代的发展，pc已经无法满足人们的需求，于是出现了移动端 viewport：视窗的设置 <meta name="viewport" content=" width=device-width, 宽度等于设备的宽度，浏览器宽度等于系统分辨率 initial-scale=1.0, 初始化比例是1 minimum-scale=1, 最小的缩放比例 maximum-scale=1, 最大的缩放比例 user-scalable=no"> 是否允许用户缩放
移动端适配+响应式开发参考代码
06-26
设计稿的宽度：designWidth 允许自适应的最大宽度（超过这个值屏幕元素不在自适应增大）:maxWidth 页面顶部加上：<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" > 这段js的传入两个参数:一个为设计稿实际宽度，一个为显示的最大宽度（允许的屏幕最大宽度，用来限制屏幕过大之后元素还会自适应增大的） 例如设计稿为750，最大宽度为600，则为(750,600)，屏幕大于600之后就不会自适应变大了，也相当于在用@media属性时min-width只设置到了600，没有后面的屏幕尺寸，就不会再变化了 公式：1rem = 浏览器屏幕宽（width） * 100 / 设计稿宽(designWidth) (750,750)含义1rem = clientWidth * 100 / 750 (750,2160)含义1rem = clientWidth * 100 / 750 clientWidth是动态获取的 后
移动端开发-响应式布局
gj1949的博客
12-30 727
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，当然响应式布局理论上应该是pc端和移动端都是可以的，不过在实际的操作中因为移动端的开发有时候要针对不同的终端，下面我就针对移动端的开发对移动端页面的响应式开发的步骤和原理做下简单的总结。        我们再做移动端开发的时候在布局的选择上，比如弹性布局，百分比布局，流式布局，固定布局等，当然我个人感觉目前比较比较常用的是rem布
移动WEB 响应式设计 @media总结
09-20 129
第一种： 在引用样式的时候添加 <link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css"> 第二种： 写样式的时候添加 @media mediatype and|not|only (media feature) { ...
移动端页面（响应式）
weixin_34399060的博客
08-14 167
手机端页面的做法 学会 media query 媒体查询 通过@media，判断设备类型，如pc/mobile/pad等设配，然后根据媒体查询的结果使用不同的css。一套html + 多套css pc端一套html+css/手机端一套html+css 不做响应式布局，pc端和手机端分别使用一个域名，做两个不同的网站 例如淘宝和京东。 淘宝pc端网址：www.taobao.com ...
响应式Web设计
02-03
响应式Web设计不是我首创的概念，早就有了，我这里只不过把自己最近这段时间关于这方面的研究做了一个总结。至于这篇文章能给你带来多大的益处我保证不了，但是只从读完这篇文章之后你至少能明白以下几点：1、为什么...
响应式 Web 设计 – 框架
12-14
响应式Web设计是一种现代网页开发方法，旨在创建能够适应不同设备屏幕尺寸的网站。随着移动设备的普及，用户越来越倾向于在手机和平板电脑上浏览网页，因此，网站必须能够自适应这些不同尺寸的屏幕，提供良好的用户...
响应式Web设计：最佳指南
03-02
如果你正运营一个网站，那就必须有一个响应式的Web设计，以便可以从移动终端上很好地访问你的网站。如果你还没意识到响应式设计的盛行，你应该多去了解一下它。首先了解什么是响应式Web设计，这一点很重要。精确的说...
移动端WEB开发之响应式布局(响应式开发原理、bootstrap、阿里百秀案例)
zep
06-12 1089
移动端WEB开发之响应式布局 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 设备的划分情况： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0"/> <meta http-e
Web响应式布局设计简介
凡梦
12-06 3752
随着移动互联的到来，市面上的移动终端设备越来越多屏幕尺寸也大小不一。就拿苹果的iPhone来说就有多个不同尺寸的版本，还有iPad也是随着技术的进步屏幕大小、分辨率也在变化。更不用说基于开源Android系统的小米、华为、三星等手机和pad了。怎么在网站设计中能够一种设计支持所有终端设备，而不是为每个终端设备制作一套不同的web页面？响应式布局设计就是为应对移动互联网多终端设备而提出的。 响应式
【响应式Web前端设计】一文学会使用Bootstrap！
李响
03-29 435
文章目录1 概念2 Bootstrap简介3 布局容器4 导航栏（navbar）4.1 基本4.2 响应式5 垂直表单-基本表单6 栅格系统7 标签页8 响应式工具 请先学习该文 1 概念 媒体查询 媒体(media)查询在 CSS3 上有介绍：CSS3 @media 查询。 使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。 实例 如果浏览器窗口小于 500px, 背景将变为浅蓝色： @media only screen and (max-width: 500px) { body {
Html-移动端与响应式
可可的博客
11-15 485
Html-移动端与响应式 一、 viewport视窗的设置 此声明只适用于移动端 可以固定移动端的宽长 viewport视窗的设置 content=" width=device-width,浏览器的宽度分辨率等于系统的分辨率 initial-scale=1.0初始比例是1 minimum-scale=1最小的缩放比例 maximum-scale=1最大的放大比 user-scalable="no"用户不允许缩放 <meta name="viewport" content=
移动端开发-响应式页面
最新发布
Pari_Yang的博客
11-15 630
学会如何去使用**前端 UI 框架**。
web前端响应式设计总结
weixin_33965305的博客
01-17 1460
2019独角兽企业重金招聘Python工程师标准>>> ...
移动端响应式布局基础
cssshua的博客
09-19 3878
搭建一个H5页面，我们需要在head中添加一个meta标签 快捷键：meta:vp + tab键 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> viewport：视
移动web开发之响应式布局
function_road的博客
05-07 1208
移动端WEB开发之响应式布局 1.0 响应式开发原理 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 设备的划分情况： 小于768的为超小屏幕（手机） 768~992之间的为小屏设备（平板） 992~1200的中等屏幕（桌面显示器） 大于1200的宽屏设备（大桌面显示器） 1.2 响应式布局容器 响应式需要一个父级做为布局容器，来配合子...
web移动端实现响应式布局解决方案
weixin_43660626的博客
06-02 501
1、移动端的响应式布局主要用到rem，并且rem要跟随页面的尺寸改变而不断调整，两者缺一不可。 2、本文没有采用flexible方案，该方案主要是使用js监听window的size，进而改变rem数值； 3、采用rem+vw是当前比较合适的解决方案； flexible.css // 对应750px稿图 html{font-size:13.33333333vw} // 尺寸过大的兼容方案 @media (min-width: 560px) { html { font-size: 54px; }
移动端基础及响应式布局
袅袅青烟散的博客
11-24 4676
目录1.移动端概述和hybird模式 2.响应式布局基础 3.响应式布局之流式布局 4.做移动端项目之前的准备 5.响应式布局demo 6.rem响应式布局 7.swiper的使用和轮播图 8.综合案例-微信场景应用1.移动端概述和hybird模式移动端：运行在移动设备上的产品 产品大部分都只需要适配ios和安卓系统即可 响应式布局：在不同的设备上都能给予客户最好的操作体验 移动
移动优先与响应式设计：打造适应万物的Web体验
《移动优先与响应式Web设计》是由Luke Wroblewski和Ethan Marcotte合著的一本权威著作，针对科技快速进步和多元化设备环境下的Web设计挑战提供了深入的见解。这本书主要分为两个核心部分： 第一部分，"Mobile First...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值