IT修真院·坑乎 | Java(后端),CSS(前端),JavaScript(前端),PM(产品经理),UI(交互设计),QA(测试),Android(安卓APP),iOS(苹果APP),OP(运维),Python(后端)日常在线问答学习平台

IT修真院·坑乎 | Java(后端),CSS(前端),JavaScript(前端),PM(产品经理),UI(交互设计),QA(测试),Android(安卓APP),iOS(苹果APP),OP(运维),Python(后端)日常在线问答学习平台

咨询电话 : 010-59478634

全部问题

已收录问题

未收录问题

没有找到答案，去提问>>>

该问题已被官方收录

页面的字体不能定死，会随着页面改变的大小。

2

6

自适应

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html style="font-size:62.5%">
<head>
    <meta charset="utf-8">

    <title>001</title>
    <style type="text/css">
        /* 根据屏幕尺寸的放大缩小 div 没有反应 */
        div{
            display:flex;
            justify-content:space-around;
            width:20rem;
            height:20rem;
            color: blue;
            padding-left: 1rem;
            line-height: 4rem;
            font-size: 200px;}

        /* 根据屏幕尺寸的放大缩小 body 颜色切换 */
        body {background-color:lightgreen;}
        @media screen and (max-width: 300px) {
            body {background-color:lightblue;}
        }
    </style>
</head>
<body>
<div>asdasdfasdf</div>
</body>
</html>

该问题已被官方收录

不明白怎样才能不管一个字还是十几个字都能让文字处于绝对居中。

8

5

居中

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

*{margin: 0;padding: 0;}

html{height: 100%;}

body{
	color: white;
	font-size:125%;
}
.header{
	display: flex;
	align-items:center;
	background-color:#68cdd5; 
	padding: 2.5em 50%;
	width: 2%;
}
.header p{
	display: block;
	position:absolute;
}
.header p h2;{
	display: block;
}

该问题已被官方收录

4

4

photoshop

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

怎么用PS一键切图?

4

2

PhotoShop

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

html,body{height:100%}为什么还要设html的高度？

1

2

自适应

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    html,body{height:100%}
    .parentElement{
        position:relative;
        background-color:aqua;
        width:200px;
        height:50%; 
    }

 .childElement{
     position:absolute;
     top:50%;
     transform:translateY(-50%);
     background-color:blueviolet;
        width:50%; 
        height: 25%;
        margin-left:25%;
 }
    </style>

</head>
<body>
    <div class="parentElement">
    <div class="childElement"></div>
    </div>
    
</body>
</html>

该问题已被官方收录

全局只有一个元素绝对定位了，这个元素是相对谁定位？

5

1

绝对定位

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>蚂蚁部落</title>
<style>
    div {
        position: absolute;
        top:0;
        left:0;
        width: 300px;
        height: 300px;
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

该问题已被官方收录

在移动端的弹窗上,给body设置overflow:hidden为什么页面还能滚？

0

1

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

$rootScope.notice = function (content) {
            var modal = $modal({
                html: true,
                show: false,
                backdrop: false,
                templateUrl: 'views/template/notice.html',
                controller: function ($scope) {
                    $scope.content = content;
                    $scope.ok = function () {
                        typeof okFn == 'function' && okFn();
                        modal.$promise.then(modal.hide);
                    };
                    window.onpopstate = function () {
                        modal.$promise.then(modal.hide);
                    };
                }
            });
            modal.$promise.then(modal.show);
        };

该问题已被官方收录

在自适应的任务中为什么很少用vw，如果用了会有什么缺点

2

1

css单位

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

如何如何将我的头部文件固定并保证3个文字定位

3

1

绝对定位

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码


.text1 {
	line-height: 53px;
	display: inline;
	float: left;
	margin-left: 1rem;
}//css文本
.nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background-color: rgb(90,192,206);
	width:100%;
	height: 60px;
}//头部固定
<div class="nav">
			<a href="#" class="text1">注册</a>
			<span class="login">登录</span>
			<a href="#" class="text2">关闭</a>
		</div>//HTML部分

该问题已被官方收录

如何通过rem，font-size，媒体查询实现完美的自适应移动端布局

1

1

自适应 css单位

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

html {
    font-size: 62.5%
}
@media only screen and (min-width: 481px) {
    html {
        font-size:109%!important
    }
}

@media only screen and (min-width: 561px) {
    html {
        font-size:130%!important
    }
}

去第页

Copyright ©2015 北京葡萄藤信息技术有限公司 All Rights Reserved | 京ICP备15035574号-1