我在使用以下组件架构的应用程序上应用媒体查询(用于响应行为)时遇到一些问题
那么我们有 View ,它们集成在自己的模块和导入业务模块中。它将使用品牌和/或业务组件,这里我们面临一些关于 CSS 媒体查询的问题 .这些 View 使用默认的 Angular 封装模式。
具体情况是,我们尝试为特定 View 自定义输入字段,以便在响应式案例中正确运行 (不同方向的手机、平板电脑和台式机)。为此,我们使用外部插件 angular flex 布局(beta 7)
此输入字段存在于基本组件上,但我们将带来它的品牌案例。我们想要的是更改其在品牌上设置的默认宽度/高度,以适应将封装它的 div 容器。
这是我们迄今为止所做的:
具体 View 的scss:
// MEDIA QUERIES
:host ::ng-deep {
@media screen and (min-width: 300px) and (orientation: portrait) {
.inputField,
.inputFieldEditing,
.inputFieldChanged,
.inputFieldDisabled {
width: 95%;
}
}
@media screen and (min-width: 300px) and (orientation: landscape) {
.inputField,
.inputFieldEditing,
.inputFieldChanged,
.inputFieldDisabled {
width:(80px * 2.625);
}
}
@media screen and (min-width: 480px) and (orientation: landscape) {
.inputField,
.inputFieldEditing,
.inputFieldChanged,
.inputFieldDisabled {
width:(80px * 2.9);
}
}
@media screen and (min-width: 640px) and (orientation: portrait) {
.inputField,
.inputFieldEditing,
.inputFieldChanged,
.inputFieldDisabled {
width:(80px * 2);
height:(16px * 1.6);
}
}
@media screen and (min-width: 640px) and (orientation: landscape) {
.inputField,
.inputFieldEditing,
.inputFieldChanged,
.inputFieldDisabled {
width:(80px * 2.68);
height:(16px * 1.6);
}
}
@media screen and (min-width: 768px) and (orientation: portrait) {
.inputField,
.inputFieldEditing,
.inputFieldChanged,
.inputFieldDisabled {
width:(80px * 3.3);
height:(16px * 1.6);
}
}
@media screen and (min-width: 768px) and (orientation: landscape) {
.inputField,
.inputFieldEditing,
.inputFieldChanged,
.inputFieldDisabled {
width:(80px * 3.5);
height:(16px * 1.6);
}
}
@media screen and (min-width: 900px) and (orientation: portrait) {
.inputField,
.inputFieldEditing,
.inputFieldChanged,
.inputFieldDisabled {
width:(80px * 3.5);
height:(16px * 1.625);
}
}
@media screen and (min-width: 900px) and (orientation: landscape) {
.inputField,
.inputFieldEditing,
.inputFieldChanged,
.inputFieldDisabled {
width:(80px * 1.875);
height:(16px * 1.625);
}
}
@media screen and (min-width: 1200px) and (orientation: portrait) {
.inputField,
.inputFieldEditing,
.inputFieldChanged,
.inputFieldDisabled {
width:(80px * 3.75);
height:(16px * 1.625);
}
}
@media screen and (min-width: 1200px) and (orientation: landscape) {
.inputField,
.inputFieldEditing,
.inputFieldChanged,
.inputFieldDisabled {
width:(80px * 2.5);
height:(16px * 1.625);
}
}
}
以前的自定义类存在并用于品牌化输入字段组件,以便根据不同情况更改其 UX。
品牌输入字段组件模板文件:
<sh-input-field [id]="id"
[caption]="caption | translate"
[(model)]="userInput"
[placeholder]="placeholder | translate"
[type]="inputType"
[color]="color"
[font-size]="fontsize"
[isDisabled]="!enabled"
[style]="{'width': width,
'height': height}"
[status]="status"
[baseClass]="INPUT_CLASS_ENABLED"
[extendedClass]="extendedClass"
[stateClasses]="{
focusedOn: INPUT_CLASS_EDITING,
enabledOn: INPUT_CLASS_ENABLED,
enabledOff: INPUT_CLASS_DISABLED,
valueChanged: INPUT_CLASS_CHANGED
}"
[passwordWeakCaption]="passwordWeakCaption"
[passwordMediumCaption]="passwordMediumCaption"
[passwordStrongCaption]="passwordStrongCaption"
[isPasswordFeedbackShown]="isPasswordFeedbackShown">
</sh-input-field>
品牌输入字段组件 scss 文件:
/* CAPTION */
.uiElemSideCaptionLeft,
.uiElemSideCaptionRight,
.uiElemSideCaptionDisabled {
position: relative;
display: inline-block;
padding-top: 2px;
text-align: left;
font-size: 14px;
-ms-opacity: 1;
opacity: 1;
color: #333;
}
.uiElemSideCaptionRight {
-ms-opacity: 1;
opacity: 1;
text-align: right;
}
.uiElemSideCaptionDisabled {
-ms-opacity: 0.4;
opacity: 0.4;
}
/* INPUT-FIELD */
.inputField,
.inputFieldEditing,
.inputFieldChanged,
.inputFieldDisabled {
position: relative;
display: inline-block;
height: 16px;
width: 80px;
padding: 4px;
background-color: #dddddd;
border-width: 1px;
border-color: #979797;
border-style: solid;
font-size: 14px;
text-align: left;
color: rgba(0, 0, 0, 1);
-ms-opacity: 1;
opacity: 1;
}
.inputFieldEditing {
-ms-opacity: 1;
opacity: 1;
background-color: #eee;
height: 14px;
border-width: 2px;
border-color: #F8E71C;
color: rgba(0, 0, 0, 1);
border-style: solid;
}
.inputFieldChanged {
-ms-opacity: 1;
opacity: 1;
background-color: rgba(245, 166, 35, 0.5);
height: 16px;
border-width: 1px;
border-color: #979797;
color: rgba(0, 0, 0, 1);
border-style: solid;
}
.inputFieldDisabled {
-ms-opacity: 0.6;
opacity: 0.6;
height: 16px;
background-color: lightgray;
border-width: 1px;
border-color: #979797;
border-style: solid;
color: rgba(0, 0, 0, 1);
}
品牌输入字段组件定义:
@Component({
selector: 'br-input-field',
templateUrl: './input-field.component.html',
styleUrls: ['./input-field.component.scss'],
encapsulation: ViewEncapsulation.Native
})
基本输入字段组件模板文件:
<div class="sh-input-field-global-container">
<div class="sh-input-field-label-container" *ngIf="caption !== '' && caption !== undefined && caption !== null">
<label [for]="id">{{caption}}</label>
</div>
<div class="sh-input-field-container" [ngClass]="extendedClass">
<input *ngIf="controlType !== 'password'"
[ngClass]="getCssClases('sh-input-field', baseClass)"
[attr.id]="id"
[placeholder]="placeholder"
[disabled]="isDisabled"
(focus)="InvokeFocus($event)"
(blur)="InvokeBlur($event)"
(keyup.enter)="InvokeKeyUpEnterEvent($event)"
(keyup.escape)="InvokeKeyUpEscapeEvent($event)"
[(ngModel)]="model"
[attr.name]="formName"
[maxLength]="length"
[type]="controlType"
[ngStyle]="style"/>
<input *ngIf="controlType === 'password'"
[ngClass]="GetCssClases('sh-input-field', baseClass)"
[attr.id]="id"
[disabled]="isDisabled"
(focus)="InvokeFocus($event)"
(blur)="InvokeBlur($event)"
(keyup.enter)="InvokeKeyUpEnterEvent($event)"
(keyup.escape)="InvokeKeyUpEscapeEvent($event)"
[(ngModel)]="model"
[attr.name]="formName"
[maxLength]="length"
[type]="controlType"
pPassword
[promptLabel]="placeholder"
[weakLabel]="passwordWeakCaption"
[mediumLabel]="passwordMediumCaption"
[strongLabel]="passwordStrongCaption"
[feedback]="isPasswordFeedbackShown"
[ngStyle]="style"/>
</div>
</div>
基本输入字段组件定义:
@Component({
selector: 'sh-input-field',
templateUrl: './input-field.component.html',
styleUrls: ['./input-field.component.scss']
})
那么这里有什么问题呢? 我们是否在特定 View 上错误地使用 :host :ng-deep ? 我们已经看到,如果我们将这些媒体查询直接应用于品牌输入字段 sass 文件,它可以正常工作(删除 :host :ng-deep 标记)
最佳答案
试试 :host /deep/
而不是 :host ::ng-deep
如下所示
:host /deep/ {
/*your style goes here*/
}
或者
使用
encapsulation: ViewEncapsulation.None
而不是 encapsulation: ViewEncapsulation.Native
关于html - Angular 6/7 css 媒体查询不适用于孙子,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53167163/