响应式设计的一些方法

最新推荐文章于 2021-08-12 23:10:08 发布
最新推荐文章于 2021-08-12 23:10:08 发布
阅读量67 收藏
点赞数

1、表单输入框自适应

示例代码：

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>响应式设计--表单自适应</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            
            form {
                /*关键设置 margin-right*/
                margin-right: 4em;
                /*关键设置 定位*/
                position: relative;
            }
            
            form input {
                /*关键设置 宽度*/
                width: 100%;
                line-height: 1.4;
                box-sizing: border-box;
            }
            
            form button {
                /*关键设置 定位*/
                position: absolute;
                left: 100%;
                top: 2px;
                width: 4em;
                box-sizing: border-box;
            }
        </style>
    </head>

    <body>
        <form action="" method="post">
            <input type="text" name="age" value="" />
            <button type="button">提交</button>
        </form>
    </body>

</html>

效果：

 

2、导航栏自适应布局

（1）、display：table 实现

示例代码：

 

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>响应式设计--导航栏自适应布局</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            
            nav {
                /*关键属性设置*/
                display: table;
                width: 100%;
                background: #00bcd4;
            }
            
            nav a {
                /*关键属性设置*/
                display: table-cell;
                text-decoration: none;
                color: #fff;
                padding: 0 1em;
            }
            /*关键属性设置*/
            
            nav a:not(:first-child) {
                border-left: 1px solid rgba(255, 255, 255, 0.7);
            }
        </style>
    </head>

    <body>
        <nav>
            <a href="#">Home</a>
            <a href="#">Javascript</a>
            <a href="#">HTML</a>
            <a href="#">CSS</a>
            <a href="#">HTTP</a>
        </nav>
    </body>

</html>

 

 效果：

 

 （2）flex布局

示例代码：

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>响应式设计--导航栏自适应布局</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            
            nav {
                /*关键属性设置*/
                display: flex;
                width: 100%;
                background: #00bcd4;
            }
            
            nav a {
                /*关键属性设置*/
                flex:1;
                text-decoration: none;
                color: #fff;
                padding: 0 1em;
            }
            /*关键属性设置*/
            
            nav a:not(:first-child) {
                border-left: 1px solid rgba(255, 255, 255, 0.7);
            }
        </style>
    </head>

    <body>
        <nav>
            <a href="#">Home</a>
            <a href="#">Javascript</a>
            <a href="#">HTML</a>
            <a href="#">CSS</a>
            <a href="#">HTTP</a>
        </nav>
    </body>

</html>

效果同上。

3、网格布局（inline-block+justify）

示例代码：

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>响应式设计--网格自适应布局</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            
            ul {
                /*以下三行关键属性设置*/
                margin: 0;
                padding: 0;
                text-align: justify;
            }
            
            li {
                /*关键属性设置*/
                display: inline-block;
                /*关键属性设置*/
                width: 30%;
                height: 100px;
                line-height: 100px;
                background: lightblue;
                text-align: center;
                margin-bottom: 1em;
            }
        </style>
    </head>

    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
        </ul>
    </body>

</html>

效果：

4、使用媒体查询

weixin_33693070
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
媒体查询实现响应式设计的三种方法
u012183426的博客
03-23 1831
方法一：利用Link标签从外部引入文件<link rel='stylesheet' media='screen and (min-width:1000px)' href='./css/over1000.css'> 方法二：用import导入文件：@import url('style.css') only screen and (min-width: 500px); 方法三：直接...
响应式设计
06-09
响应式设计是一种现代网页开发的方法，它旨在提供一个无缝的用户体验，无论用户是通过桌面电脑、平板电脑还是智能手机访问网站。这种设计方法的核心理念在于，网站的布局、图像和功能应能够灵活适应不同设备的屏幕...
响应式布局的设计方法
px459的博客
07-24 722
作为一名优秀的web前端人员，不懂响应式布局怎么可以呢？ 今天跟大家分享web前端开发和设计的干货。关于响应式布局的设计方法和响应式前端优化。        我们都知道，目前主流的pc屏幕的分辨率都是1366*768、1440*900 、1280*1024等大屏的显示器。        所以，我们设计的网页不能在按照1024的标准来设计或者是前端重构了。        再加上现在移动互联网的
怎么在服务器端做响应式布局,关于响应式布局的设计方法和响应式前端优化
weixin_39920403的博客
08-12 319
原标题：关于响应式布局的设计方法和响应式前端优化作为一名优秀的web前端人员，不懂响应式布局怎么可以呢？ 今天跟大家分享web前端开发和设计的干货。关于响应式布局的设计方法和响应式前端优化。我们都知道，目前主流的pc屏幕的分辨率都是1366*768、1440*900 、1280*1024等大屏的显示器。所以，我们设计的网页不能在按照1024的标准来设计或者是前端重构了。再加上现在移动互联网的趋势发...
MaterialDesign复杂响应式设计
03-03
通过纸片在物理世界中形态的抽象和提炼，定义了各种信息层级和常用状态的表达方式，并详细讲解了各个细节的处理方法，就像一本考试大纲，囊括了产品中常用的UI细节，甚至一些UX细节。如果说UX和U
响应式Web设计.zip
07-22
一种设计方法，可以使同一网站在智能手机、桌面电脑，以及介于这两者之间的任意设 备上完美显示。这种方法能够根据用户的屏幕尺寸，合理地为现有及将来的各种设备提 供最佳的浏览体验。 本书提供了一整套方法，用来...
响应式 Web 设计 – 框架
12-14
响应式Web设计是一种现代网页开发方法，旨在创建能够适应不同设备屏幕尺寸的网站。随着移动设备的普及，用户越来越倾向于在手机和平板电脑上浏览网页，因此，网站必须能够自适应这些不同尺寸的屏幕，提供良好的用户...
简洁响应式网站设计模板
04-02
在响应式设计中，简洁性尤为重要，因为更少的元素意味着在不同设备上更容易管理和适应。 1. **媒体查询**：媒体查询是CSS3的一个重要特性，它允许开发者定义针对不同设备特性的样式规则。通过检测设备的宽度、高度...
基本响应式设计概念
moduzhang的博客
08-03 1247
响应式设计的艺术 设置视窗 当我们制作网页的时候，可能内容会溢出界面，或者我们需要放大页面才能看清内容，这就和我们设置视窗（浏览器能够显示内容的区域）有关。如果没有定义视图端口，浏览器会自己决定视图尺寸，这会导致网页发生一些变化。 在 &lt;head&gt; 标签中添加 &lt;viewport&gt; 标签，可以让浏览器知道我们的意图，避免左右滚动。如下内容： &lt;meta nam...
快速入门响应式设计
林洪炳的日常技术积累
07-13 1383
在移动时代，单纯学了DIV+CSS布局远远不够，还要学习响应式布局将设计的网页能在所有设备都能显示出最合适最好看的效果。说到响应式布局，可以学习和使用bootstrap这类优秀的响应式框架，但是觉得bootstrap太过臃肿或不自由，意图自己写轻量快速简单的代码的话，那就有必要学习CSS3和HTML5的新特性了。如果还是犹豫不知学习哪个的话，个人建议先学习HTML5和CSS3作为基础，那样在需要使
web前端响应式设计总结
weixin_33965305的博客
01-17 1457
2019独角兽企业重金招聘Python工程师标准>>> ...
响应式设计的三个步骤
老刘的博客
09-02 2713
现在，响应式Web设计无疑是非常流行的。如果你对响应式设计还不熟悉，可以看看我之前发表过的关于这方面的responsive sites。对于新人，responsive design可能听起来有点复杂，但实际上，它比你想的要简单的多。为了帮助你快速入门响应式Web设计，我写了一篇快速入门教程。我保证你通过三步就可以学会响应式设计的基本逻辑和媒体查询(media query)(假设你有基本的CSS知识
响应式布局
小诺
12-02 1656
首先我们应该遵循移动优先原则，交互和设计应以移动端为主，PC则作为移动端的一个扩展；一个页面需要兼容不同终端，那么有两个关键点是我们需要去做到响应式的：响应式布局和响应式内容（图片、多媒体）。 一、响应式布局 如我们需要兼容不同屏幕分辨率、清晰度以及屏幕定向方式竖屏(portrait)、横屏(landscape)，怎样才能做到让一种设计方案满足所有情况？对此，马海祥觉的我们的布局应该是
【创新未发表】Matlab实现黏菌优化算法SMA-Kmean-Transformer-LSTM负荷预测算法研究.rar
最新发布
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
PyTorch使用教程.pdf
07-29
PyTorch 是一个开源的机器学习库，广泛用于计算机视觉和自然语言处理等领域。以下是一个简化的 PyTorch 使用教程，不采用分点或Markdown格式。 首先，确保你安装了 PyTorch。你可以通过访问 PyTorch 官网获取安装指令，根据你的系统环境（如 Windows, macOS, Linux）和是否使用 GPU 支持进行安装。 安装完成后，你可以开始编写 PyTorch 代码了。 这里，我们将通过一个简单的例子来展示 PyTorch 的基本用法：创建一个简单的神经网络来识别手写数字（基于 MNIST 数据集）。
ubuntu man帮助手册
07-29
ubuntu man帮助手册
彩屏驱动开发技术资料提高篇TFT-51-11.zip
07-29
彩屏驱动开发技术资料提高篇TFT-51-11.zip
响应式网页设计：布局与实践
它首先探讨了响应式设计的理念，即如何创建能够适应不同设备和屏幕尺寸的网站，使用户体验始终保持一致，无论是在桌面电脑、平板电脑还是手机上。书中第1章"我们的响应式网络"介绍了响应式设计的起源及其对传统网页...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值